Commit a43bb75fc15ac763dfedaaa823aed5805563f305
1 parent
cd8561baec
Exists in
master
合并
Showing
2 changed files
with
8 additions
and
9 deletions
Show diff stats
src/pages/cart/cart.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <block v-if="cartList.length==0"> | 3 | <block v-if="cartList.length==0"> |
| 4 | 4 | ||
| 5 | </block> | 5 | </block> |
| 6 | <block v-else> | 6 | <block v-else> |
| 7 | <view class="card"> | 7 | <view class="card"> |
| 8 | <view class="cardHeader"> | 8 | <view class="cardHeader"> |
| 9 | <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" | 9 | <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" |
| 10 | @tap="pChange(pIsoPen)"> | 10 | @tap="pChange(pIsoPen)"> |
| 11 | <span class="correct"></span> | 11 | <span class="correct"></span> |
| 12 | </view> | 12 | </view> |
| 13 | <image src="../../static/store.png" mode="aspectFill"></image> | 13 | <image src="../../static/store.png" mode="aspectFill"></image> |
| 14 | <text>非常戴镜</text> | 14 | <text>非常戴镜</text> |
| 15 | </view> | 15 | </view> |
| 16 | 16 | ||
| 17 | <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" | 17 | <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" |
| 18 | @longpress="delCart(item.cart_id,index)"> | 18 | @longpress="delCart(item.cart_id,index)"> |
| 19 | <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" | 19 | <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" |
| 20 | @tap="Change(childIsOpen[index],index)"> | 20 | @tap="Change(childIsOpen[index],index)"> |
| 21 | <span class="correct"></span> | 21 | <span class="correct"></span> |
| 22 | </view> | 22 | </view> |
| 23 | <view class="imageWrap"> | 23 | <view class="imageWrap"> |
| 24 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 24 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 25 | </view> | 25 | </view> |
| 26 | <view class="goodInfo"> | 26 | <view class="goodInfo"> |
| 27 | <!-- <view class="imageWrap"> | 27 | <!-- <view class="imageWrap"> |
| 28 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 28 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 29 | </view> --> | 29 | </view> --> |
| 30 | <view class="infoRight"> | 30 | <view class="infoRight"> |
| 31 | <view class="goodName" @tap="toGoods(item.pid)">{{item.p_name}}</view> | 31 | <view class="goodName" @tap="toGoods(item.pid,item.sk_id)">{{item.p_name}}</view> |
| 32 | <!-- <view class="describ"> --> | 32 | <!-- <view class="describ"> --> |
| 33 | <uni-collapse accordion="true" > | 33 | <uni-collapse accordion="true" > |
| 34 | <uni-collapse-item showAnimation='true' | 34 | <uni-collapse-item showAnimation='true' |
| 35 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" > | 35 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" > |
| 36 | <text class="describ"> | 36 | <text class="describ"> |
| 37 | <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> | 37 | <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> |
| 38 | {{tag.label+` `}} | 38 | {{tag.label+` `}} |
| 39 | </block> | 39 | </block> |
| 40 | </text> | 40 | </text> |
| 41 | <!-- <text> | 41 | <!-- <text> |
| 42 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> | 42 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> |
| 43 | {{tag.label+` `}} | 43 | {{tag.label+` `}} |
| 44 | </block> | 44 | </block> |
| 45 | </text> --> | 45 | </text> --> |
| 46 | </uni-collapse-item> | 46 | </uni-collapse-item> |
| 47 | </uni-collapse> | 47 | </uni-collapse> |
| 48 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> | 48 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> |
| 49 | <!-- </view> --> | 49 | <!-- </view> --> |
| 50 | <view class="priceBox"> | 50 | <view class="priceBox"> |
| 51 | <view class="price">￥{{item.nowPrice*item.num}}</view> | 51 | <view class="price">￥{{item.nowPrice*item.num}}</view> |
| 52 | <text class="maxCount">(限购{{maxCount}}副)</text> | 52 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| 53 | <view class="counter"> | 53 | <view class="counter"> |
| 54 | <view class="btn" disabled="this.addDisabled" type="default" | 54 | <view class="btn" disabled="this.addDisabled" type="default" |
| 55 | @tap="counter(index,false,item)">-</view> | 55 | @tap="counter(index,false,item)">-</view> |
| 56 | <text>{{item.num}}</text> | 56 | <text>{{item.num}}</text> |
| 57 | <view class="btn" disabled="this.desDisabled" type="default" | 57 | <view class="btn" disabled="this.desDisabled" type="default" |
| 58 | @tap="counter(index,true,item)">+</view> | 58 | @tap="counter(index,true,item)">+</view> |
| 59 | </view> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | </view> | 64 | </view> |
| 65 | </block> | 65 | </block> |
| 66 | <view class="footer"> | 66 | <view class="footer"> |
| 67 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | 67 | <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> |
| 68 | <view class="footerRight"> | 68 | <view class="footerRight"> |
| 69 | <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> | 69 | <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> |
| 70 | <view class="paybtn" >立即结算</view> | 70 | <view class="paybtn" >立即结算</view> |
| 71 | </navigator> | 71 | </navigator> |
| 72 | </view> | 72 | </view> |
| 73 | </view> | 73 | </view> |
| 74 | 74 | ||
| 75 | </view> | 75 | </view> |
| 76 | </template> | 76 | </template> |
| 77 | 77 | ||
| 78 | <script> | 78 | <script> |
| 79 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 79 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 80 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 80 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 81 | import store from '@/store' | 81 | import store from '@/store' |
| 82 | 82 | ||
| 83 | export default { | 83 | export default { |
| 84 | components: { UniCollapse, UniCollapseItem }, | 84 | components: { UniCollapse, UniCollapseItem }, |
| 85 | data() { | 85 | data() { |
| 86 | return { | 86 | return { |
| 87 | totalPrice: 0, | 87 | totalPrice: 0, |
| 88 | pIsoPen: false, | 88 | pIsoPen: false, |
| 89 | // childIsOpen:[], | 89 | // childIsOpen:[], |
| 90 | maxCount: 20 | 90 | maxCount: 20 |
| 91 | } | 91 | } |
| 92 | }, | 92 | }, |
| 93 | computed: { | 93 | computed: { |
| 94 | 94 | ||
| 95 | cartList() { | 95 | cartList() { |
| 96 | console.log('cart-list', this.$store.state.cart.cartList); | 96 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 97 | return this.$store.state.cart.cartList | 97 | return this.$store.state.cart.cartList |
| 98 | }, | 98 | }, |
| 99 | childIsOpen() { | 99 | childIsOpen() { |
| 100 | const temp = [] | 100 | const temp = [] |
| 101 | temp.length = this.$store.state.cart.cartList.length | 101 | temp.length = this.$store.state.cart.cartList.length |
| 102 | for (let i = 0; i < temp.length; i++) { | 102 | for (let i = 0; i < temp.length; i++) { |
| 103 | temp[i] = false | 103 | temp[i] = false |
| 104 | } | 104 | } |
| 105 | console.log('this.childisOPne===>', temp) | 105 | console.log('this.childisOPne===>', temp) |
| 106 | return temp | 106 | return temp |
| 107 | } | 107 | } |
| 108 | }, | 108 | }, |
| 109 | onLoad: function() { | 109 | onLoad: function() { |
| 110 | // store.dispatch('cart/addCart', { | 110 | // store.dispatch('cart/addCart', { |
| 111 | // uid: this.$store.state.user.userInfo.uid, | 111 | // uid: this.$store.state.user.userInfo.uid, |
| 112 | // openid: this.$store.state.user.userInfo.openid, | 112 | // openid: this.$store.state.user.userInfo.openid, |
| 113 | // mp_id: 7, | 113 | // mp_id: 7, |
| 114 | // sk_id: 7, | 114 | // sk_id: 7, |
| 115 | // num: 1, | 115 | // num: 1, |
| 116 | // pid: 8, | 116 | // pid: 8, |
| 117 | // price: 128, | 117 | // price: 128, |
| 118 | // checkedSKU:{}, | 118 | // checkedSKU:{}, |
| 119 | // }) | 119 | // }) |
| 120 | store.dispatch('cart/getCartList', { | 120 | store.dispatch('cart/getCartList', { |
| 121 | uid: this.$store.state.user.userInfo.uid // 用户id | 121 | uid: this.$store.state.user.userInfo.uid // 用户id |
| 122 | }) | 122 | }) |
| 123 | }, | 123 | }, |
| 124 | 124 | ||
| 125 | methods: { | 125 | methods: { |
| 126 | 126 | ||
| 127 | toGoods(id) { | 127 | toGoods(id, sk_id) { |
| 128 | console.log('---', '../frameDetail/frameDetail?pid=' + id) | 128 | console.log('cart-list', this.$store.state.cart.cartList); |
| 129 | console.log('---', '../frameDetail/frameDetail?pid=' + id +'&sk_id='+sk_id) | ||
| 129 | uni.navigateTo({ | 130 | uni.navigateTo({ |
| 130 | url: '../frameDetail/frameDetail?pid=' + id, | 131 | url: '../frameDetail/frameDetail?pid=' + id+'&sk_id='+sk_id, |
| 131 | success: res => {}, | 132 | success: res => {}, |
| 132 | fail: () => {}, | 133 | fail: () => {}, |
| 133 | complete: () => {} | 134 | complete: () => {} |
| 134 | }) | 135 | }) |
| 135 | // uni.navigateTo({ | 136 | // uni.navigateTo({ |
| 136 | // url: '../frameDetail/frameDetail?oderId=' + id, | 137 | // url: '../frameDetail/frameDetail?oderId=' + id, |
| 137 | // success: res => {}, | 138 | // success: res => {}, |
| 138 | // fail: () => {}, | 139 | // fail: () => {}, |
| 139 | // complete: () => {} | 140 | // complete: () => {} |
| 140 | // }) | 141 | // }) |
| 141 | // console.log('toGoods =====> id:' + id + '======>type:' + type) | 142 | // console.log('toGoods =====> id:' + id + '======>type:' + type) |
| 142 | // switch (type) { | 143 | // switch (type) { |
| 143 | // case 1: | 144 | // case 1: |
| 144 | // uni.navigateTo({ | 145 | // uni.navigateTo({ |
| 145 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 146 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 146 | // success: res => {}, | 147 | // success: res => {}, |
| 147 | // fail: () => {}, | 148 | // fail: () => {}, |
| 148 | // complete: () => {} | 149 | // complete: () => {} |
| 149 | // }) | 150 | // }) |
| 150 | // break | 151 | // break |
| 151 | // case 2: | 152 | // case 2: |
| 152 | // uni.navigateTo({ | 153 | // uni.navigateTo({ |
| 153 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 154 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 154 | // success: res => {}, | 155 | // success: res => {}, |
| 155 | // fail: () => {}, | 156 | // fail: () => {}, |
| 156 | // complete: () => {} | 157 | // complete: () => {} |
| 157 | // }) | 158 | // }) |
| 158 | // break | 159 | // break |
| 159 | // case 3: | 160 | // case 3: |
| 160 | // uni.navigateTo({ | 161 | // uni.navigateTo({ |
| 161 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 162 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 162 | // success: res => {}, | 163 | // success: res => {}, |
| 163 | // fail: () => {}, | 164 | // fail: () => {}, |
| 164 | // complete: () => {} | 165 | // complete: () => {} |
| 165 | // }) | 166 | // }) |
| 166 | // break | 167 | // break |
| 167 | // case 4: | 168 | // case 4: |
| 168 | // uni.navigateTo({ | 169 | // uni.navigateTo({ |
| 169 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, | 170 | // url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type, |
| 170 | // success: res => {}, | 171 | // success: res => {}, |
| 171 | // fail: () => {}, | 172 | // fail: () => {}, |
| 172 | // complete: () => {} | 173 | // complete: () => {} |
| 173 | // }) | 174 | // }) |
| 174 | // break | 175 | // break |
| 175 | // default : | 176 | // default : |
| 176 | // break | 177 | // break |
| 177 | // } | 178 | // } |
| 178 | }, | 179 | }, |
| 179 | 180 | ||
| 180 | counter(index, isadd, item) { | 181 | counter(index, isadd, item) { |
| 181 | // console.log('===>>counter ===>num',num) | 182 | // console.log('===>>counter ===>num',num) |
| 182 | // console.log('===>>counter ===>isadd',isadd) | 183 | // console.log('===>>counter ===>isadd',isadd) |
| 183 | console.log('item=====>',item) | 184 | console.log('item=====>',item) |
| 184 | console.log('num=====>',item.num) | 185 | console.log('num=====>',item.num) |
| 185 | let nums = parseInt(item.num) | 186 | let nums = parseInt(item.num) |
| 186 | if (isadd) { | 187 | if (isadd) { |
| 187 | if (nums >= this.maxCount) { | 188 | if (nums >= this.maxCount) { |
| 188 | this.addDisabled = true | 189 | this.addDisabled = true |
| 189 | } else { | 190 | } else { |
| 190 | this.addDisabled = true | 191 | this.addDisabled = true |
| 191 | // 修改num | 192 | // 修改num |
| 192 | if (this.childIsOpen[index]) { | 193 | if (this.childIsOpen[index]) { |
| 193 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice | 194 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice |
| 194 | } | 195 | } |
| 195 | store.dispatch('cart/modiCart', { | 196 | store.dispatch('cart/modiCart', { |
| 196 | uid: this.$store.state.user.userInfo.uid, | 197 | uid: this.$store.state.user.userInfo.uid, |
| 197 | openid: this.$store.state.user.userInfo.openid, | 198 | openid: this.$store.state.user.userInfo.openid, |
| 198 | mp_id: item.mp_id, | 199 | mp_id: item.mp_id, |
| 199 | sk_id: item.sk_id, | 200 | sk_id: item.sk_id, |
| 200 | price: item.nowPrice, | 201 | price: item.nowPrice, |
| 201 | pid: item.pid, | 202 | pid: item.pid, |
| 202 | num: nums + 1, | 203 | num: nums + 1, |
| 203 | cart_id: item.cart_id, | 204 | cart_id: item.cart_id, |
| 204 | args: { | 205 | args: { |
| 205 | index: index, | 206 | index: index, |
| 206 | isadd: isadd | 207 | isadd: isadd |
| 207 | } | 208 | } |
| 208 | }) | 209 | }) |
| 209 | this.addDisabled = false | 210 | this.addDisabled = false |
| 210 | } | 211 | } |
| 211 | } else { | 212 | } else { |
| 212 | if (nums <= 1) { | 213 | if (nums <= 1) { |
| 213 | this.desDisabled = true | 214 | this.desDisabled = true |
| 214 | } else { | 215 | } else { |
| 215 | this.desDisabled = false | 216 | this.desDisabled = false |
| 216 | // post 请求修改相关参数 | 217 | // post 请求修改相关参数 |
| 217 | if (this.childIsOpen[index]) { | 218 | if (this.childIsOpen[index]) { |
| 218 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice | 219 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice |
| 219 | } | 220 | } |
| 220 | store.dispatch('cart/modiCart', { | 221 | store.dispatch('cart/modiCart', { |
| 221 | uid: this.$store.state.user.userInfo.uid, | 222 | uid: this.$store.state.user.userInfo.uid, |
| 222 | openid: this.$store.state.user.userInfo.openid, | 223 | openid: this.$store.state.user.userInfo.openid, |
| 223 | mp_id: item.mp_id, | 224 | mp_id: item.mp_id, |
| 224 | sk_id: item.sk_id, | 225 | sk_id: item.sk_id, |
| 225 | price: item.nowPrice, | 226 | price: item.nowPrice, |
| 226 | pid: item.pid, | 227 | pid: item.pid, |
| 227 | num: nums - 1, | 228 | num: nums - 1, |
| 228 | cart_id: item.cart_id, | 229 | cart_id: item.cart_id, |
| 229 | args: { | 230 | args: { |
| 230 | index: index, | 231 | index: index, |
| 231 | isadd: isadd | 232 | isadd: isadd |
| 232 | } | 233 | } |
| 233 | }) | 234 | }) |
| 234 | this.desDisabled = true | 235 | this.desDisabled = true |
| 235 | } | 236 | } |
| 236 | } | 237 | } |
| 237 | // store.dispatch('cart/getCartList', { | 238 | // store.dispatch('cart/getCartList', { |
| 238 | // uid: this.$store.state.user.userInfo.uid // 用户id | 239 | // uid: this.$store.state.user.userInfo.uid // 用户id |
| 239 | // }) | 240 | // }) |
| 240 | }, | 241 | }, |
| 241 | 242 | ||
| 242 | Change(isopen, indexC) { | 243 | Change(isopen, indexC) { |
| 243 | // console.log('lalla===>',isopen) | 244 | // console.log('lalla===>',isopen) |
| 244 | this.childIsOpen[indexC] = !isopen | 245 | this.childIsOpen[indexC] = !isopen |
| 245 | if (!isopen) { | 246 | if (!isopen) { |
| 246 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 247 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 247 | } else { | 248 | } else { |
| 248 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 249 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 249 | } | 250 | } |
| 250 | let m = true | 251 | let m = true |
| 251 | for (let i = 0; i < this.childIsOpen.length; i++) { | 252 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 252 | m = m & this.childIsOpen[i] | 253 | m = m & this.childIsOpen[i] |
| 253 | } | 254 | } |
| 254 | if (m == 1) { | 255 | if (m == 1) { |
| 255 | this.pIsoPen = true | 256 | this.pIsoPen = true |
| 256 | } else { | 257 | } else { |
| 257 | this.pIsoPen = false | 258 | this.pIsoPen = false |
| 258 | } | 259 | } |
| 259 | }, | 260 | }, |
| 260 | pChange(isopen) { | 261 | pChange(isopen) { |
| 261 | this.pIsoPen = !isopen | 262 | this.pIsoPen = !isopen |
| 262 | for (let i = 0; i < this.childIsOpen.length; i++) { | 263 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 263 | this.childIsOpen[i] = !isopen | 264 | this.childIsOpen[i] = !isopen |
| 264 | } | 265 | } |
| 265 | if (this.pIsoPen) { | 266 | if (this.pIsoPen) { |
| 266 | // 计算总价逻辑 | 267 | // 计算总价逻辑 |
| 267 | if (this.childIsOpen.length != 0) { | 268 | if (this.childIsOpen.length != 0) { |
| 268 | for (let i = 0; i < this.childIsOpen.length; i++) { | 269 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 269 | if (this.childIsOpen[i]) { | 270 | if (this.childIsOpen[i]) { |
| 270 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) | 271 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) |
| 271 | } | 272 | } |
| 272 | } | 273 | } |
| 273 | } | 274 | } |
| 274 | } else { | 275 | } else { |
| 275 | this.totalPrice = 0 | 276 | this.totalPrice = 0 |
| 276 | } | 277 | } |
| 277 | }, | 278 | }, |
| 278 | delCart(cart_id, index) { | 279 | delCart(cart_id, index) { |
| 279 | // console.log('userInfo',this.$store.state.user.userInfo) | 280 | // console.log('userInfo',this.$store.state.user.userInfo) |
| 280 | cart_id = parseInt(cart_id) | 281 | cart_id = parseInt(cart_id) |
| 281 | // console.log('delcart------>cart_id',cart_id) | 282 | // console.log('delcart------>cart_id',cart_id) |
| 282 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | 283 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) |
| 283 | // console.log('delcart======>index',index) | 284 | // console.log('delcart======>index',index) |
| 284 | const uid=this.$store.state.user.userInfo.uid | 285 | const uid=this.$store.state.user.userInfo.uid |
| 285 | const openid=this.$store.state.user.userInfo.openid | 286 | const openid=this.$store.state.user.userInfo.openid |
| 286 | uni.showModal({ | 287 | uni.showModal({ |
| 287 | title: '是否删除该商品', | 288 | title: '是否删除该商品', |
| 288 | // content: '是否删除该商品', | 289 | // content: '是否删除该商品', |
| 289 | success: function (res) { | 290 | success: function (res) { |
| 290 | if (res.confirm) { | 291 | if (res.confirm) { |
| 291 | // this.$store.state.cart.cartList.splice(index,1) | 292 | // this.$store.state.cart.cartList.splice(index,1) |
| 292 | store.dispatch('cart/delCart', { | 293 | store.dispatch('cart/delCart', { |
| 293 | uid: uid, | 294 | uid: uid, |
| 294 | openid: openid, | 295 | openid: openid, |
| 295 | cart_id: cart_id, // 要修改的购物车id | 296 | cart_id: cart_id, // 要修改的购物车id |
| 296 | arg: index // 由于action 传参是能接收两参数，因此将index放入对象 | 297 | arg: index // 由于action 传参是能接收两参数，因此将index放入对象 |
| 297 | }) | 298 | }) |
| 298 | console.log('用户点击确定') | 299 | console.log('用户点击确定') |
| 299 | } | 300 | } |
| 300 | } | 301 | } |
| 301 | }) | 302 | }) |
| 302 | } | 303 | } |
| 303 | } | 304 | } |
| 304 | } | 305 | } |
| 305 | </script> | 306 | </script> |
| 306 | 307 | ||
| 307 | <style lang="scss"> | 308 | <style lang="scss"> |
| 308 | .content { | 309 | .content { |
| 309 | min-height: 100vh; | 310 | min-height: 100vh; |
| 310 | background-color: #f2f2f2; | 311 | background-color: #f2f2f2; |
| 311 | display: flex; | 312 | display: flex; |
| 312 | flex-direction: column; | 313 | flex-direction: column; |
| 313 | align-items: center; | 314 | align-items: center; |
| 314 | justify-content: space-between; | 315 | justify-content: space-between; |
| 315 | padding: 20rpx 40rpx; | 316 | padding: 20rpx 40rpx; |
| 316 | box-sizing: border-box; | 317 | box-sizing: border-box; |
| 317 | 318 | ||
| 318 | .partentCheck{ | 319 | .partentCheck{ |
| 319 | width: 16px; | 320 | width: 16px; |
| 320 | height: 16px; | 321 | height: 16px; |
| 321 | border-radius: 22px; | 322 | border-radius: 22px; |
| 322 | border: 1px solid #CFCFCF; | 323 | border: 1px solid #CFCFCF; |
| 323 | background-color: #FFFFFF; | 324 | background-color: #FFFFFF; |
| 324 | margin: 6px; | 325 | margin: 6px; |
| 325 | } | 326 | } |
| 326 | .partentChecked{ | 327 | .partentChecked{ |
| 327 | width: 18px; | 328 | width: 18px; |
| 328 | height: 18px; | 329 | height: 18px; |
| 329 | border-radius: 22px; | 330 | border-radius: 22px; |
| 330 | background-color: #FF6B4A; | 331 | background-color: #FF6B4A; |
| 331 | margin: 6px; | 332 | margin: 6px; |
| 332 | .correct { | 333 | .correct { |
| 333 | display: inline-block; | 334 | display: inline-block; |
| 334 | position: relative; | 335 | position: relative; |
| 335 | width: 10rpx; | 336 | width: 10rpx; |
| 336 | height: 2rpx; | 337 | height: 2rpx; |
| 337 | background: #FFFFFF; | 338 | background: #FFFFFF; |
| 338 | line-height: 0; | 339 | line-height: 0; |
| 339 | font-size: 0; | 340 | font-size: 0; |
| 340 | position: relative; | 341 | position: relative; |
| 341 | top: -7px; | 342 | top: -7px; |
| 342 | left: 4px; | 343 | left: 4px; |
| 343 | -webkit-transform: rotate(45deg); | 344 | -webkit-transform: rotate(45deg); |
| 344 | } | 345 | } |
| 345 | .correct:after { | 346 | .correct:after { |
| 346 | content: '/'; | 347 | content: '/'; |
| 347 | display: block; | 348 | display: block; |
| 348 | width: 16rpx; | 349 | width: 16rpx; |
| 349 | height: 2rpx; | 350 | height: 2rpx; |
| 350 | background: #FFFFFF; | 351 | background: #FFFFFF; |
| 351 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 352 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 352 | } | 353 | } |
| 353 | } | 354 | } |
| 354 | 355 | ||
| 355 | .card{ | 356 | .card{ |
| 356 | background-color: #FFFFFF; | 357 | background-color: #FFFFFF; |
| 357 | border-radius: 16rpx; | 358 | border-radius: 16rpx; |
| 358 | box-sizing: border-box; | 359 | box-sizing: border-box; |
| 359 | padding: 36rpx 36rpx 36rpx 18rpx; | 360 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 360 | display: flex; | 361 | display: flex; |
| 361 | flex-direction: column; | 362 | flex-direction: column; |
| 362 | align-items: center; | 363 | align-items: center; |
| 363 | justify-content: space-between; | 364 | justify-content: space-between; |
| 364 | margin-bottom: 180rpx; | 365 | margin-bottom: 180rpx; |
| 365 | .cardHeader{ | 366 | .cardHeader{ |
| 366 | width: 100%; | 367 | width: 100%; |
| 367 | height: 36rpx; | 368 | height: 36rpx; |
| 368 | display: flex; | 369 | display: flex; |
| 369 | align-items: center; | 370 | align-items: center; |
| 370 | justify-content: flex-start; | 371 | justify-content: flex-start; |
| 371 | margin-bottom: 20rpx; | 372 | margin-bottom: 20rpx; |
| 372 | image{ | 373 | image{ |
| 373 | height: 32rpx; | 374 | height: 32rpx; |
| 374 | width: 32rpx; | 375 | width: 32rpx; |
| 375 | padding-left: 6px; | 376 | padding-left: 6px; |
| 376 | padding-right: 10px; | 377 | padding-right: 10px; |
| 377 | } | 378 | } |
| 378 | text{ | 379 | text{ |
| 379 | // font-family: PingFangSC-Regular; | 380 | // font-family: PingFangSC-Regular; |
| 380 | font-size: 14px; | 381 | font-size: 14px; |
| 381 | color: #333333; | 382 | color: #333333; |
| 382 | letter-spacing: -0.26px; | 383 | letter-spacing: -0.26px; |
| 383 | } | 384 | } |
| 384 | } | 385 | } |
| 385 | .cardBody{ | 386 | .cardBody{ |
| 386 | width: 100%; | 387 | width: 100%; |
| 387 | min-height: 300rpx; | 388 | min-height: 300rpx; |
| 388 | display: flex; | 389 | display: flex; |
| 389 | align-items: center; | 390 | align-items: center; |
| 390 | justify-content: space-between; | 391 | justify-content: space-between; |
| 391 | .goodInfo{ | 392 | .goodInfo{ |
| 392 | width: 390rpx; | 393 | width: 390rpx; |
| 393 | display: flex; | 394 | display: flex; |
| 394 | flex-direction: row; | 395 | flex-direction: row; |
| 395 | justify-content: flex-start; | 396 | justify-content: flex-start; |
| 396 | padding-left: 6px; | 397 | padding-left: 6px; |
| 397 | 398 | ||
| 398 | .imageWrap{ | 399 | .imageWrap{ |
| 399 | height: 188rpx; | 400 | height: 188rpx; |
| 400 | width: 188rpx; | 401 | width: 188rpx; |
| 401 | margin-right: 28rpx; | 402 | margin-right: 28rpx; |
| 402 | 403 | ||
| 403 | image{ | 404 | image{ |
| 404 | border-radius: 4px; | 405 | border-radius: 4px; |
| 405 | height: 188rpx; | 406 | height: 188rpx; |
| 406 | width: 188rpx; | 407 | width: 188rpx; |
| 407 | } | 408 | } |
| 408 | } | 409 | } |
| 409 | .infoRight{ | 410 | .infoRight{ |
| 410 | display: flex; | 411 | display: flex; |
| 411 | flex-direction: column; | 412 | flex-direction: column; |
| 412 | align-items: flex-start; | 413 | align-items: flex-start; |
| 413 | justify-content: space-between; | 414 | justify-content: space-between; |
| 414 | min-height: 240rpx; | 415 | min-height: 240rpx; |
| 415 | .goodName{ | 416 | .goodName{ |
| 416 | display: -webkit-box; | 417 | display: -webkit-box; |
| 417 | -webkit-box-orient: vertical; | 418 | -webkit-box-orient: vertical; |
| 418 | -webkit-line-clamp: 2; | 419 | -webkit-line-clamp: 2; |
| 419 | text-align: justify; | 420 | text-align: justify; |
| 420 | overflow: hidden; | 421 | overflow: hidden; |
| 421 | font-size: 28rpx; | 422 | font-size: 28rpx; |
| 422 | color: #333333; | 423 | color: #333333; |
| 423 | } | 424 | } |
| 424 | .describ{ | 425 | .describ{ |
| 425 | width: 100%; | 426 | width: 100%; |
| 426 | // min-height: 80rpx; | 427 | // min-height: 80rpx; |
| 427 | // box-sizing: border-box; | 428 | // box-sizing: border-box; |
| 428 | // padding: 10rpx; | 429 | // padding: 10rpx; |
| 429 | font-size: 20rpx; | 430 | font-size: 20rpx; |
| 430 | letter-spacing: -0.23px; | 431 | letter-spacing: -0.23px; |
| 431 | text-align: justify; | 432 | text-align: justify; |
| 432 | color: #999999; | 433 | color: #999999; |
| 433 | // background: #F9F9F9; | 434 | // background: #F9F9F9; |
| 434 | // display: flex; | 435 | // display: flex; |
| 435 | // justify-content: center; | 436 | // justify-content: center; |
| 436 | // align-items: center; | 437 | // align-items: center; |
| 437 | // text{ | 438 | // text{ |
| 438 | // text-overflow: -o-ellipsis-lastline; | 439 | // text-overflow: -o-ellipsis-lastline; |
| 439 | // overflow: hidden; | 440 | // overflow: hidden; |
| 440 | // text-overflow: ellipsis; | 441 | // text-overflow: ellipsis; |
| 441 | // display: -webkit-box; | 442 | // display: -webkit-box; |
| 442 | // -webkit-line-clamp: 2; | 443 | // -webkit-line-clamp: 2; |
| 443 | // line-clamp: 2; | 444 | // line-clamp: 2; |
| 444 | // -webkit-box-orient: vertical; | 445 | // -webkit-box-orient: vertical; |
| 445 | // } | 446 | // } |
| 446 | // .icon { | 447 | // .icon { |
| 447 | // width: 0; | 448 | // width: 0; |
| 448 | // height: 0; | 449 | // height: 0; |
| 449 | // border-left: 5px transparent; | 450 | // border-left: 5px transparent; |
| 450 | // border-right: 5px transparent; | 451 | // border-right: 5px transparent; |
| 451 | // border-top: 5px #979797; | 452 | // border-top: 5px #979797; |
| 452 | // border-bottom: 0 transparent; | 453 | // border-bottom: 0 transparent; |
| 453 | // border-style: solid; | 454 | // border-style: solid; |
| 454 | // position: relative; | 455 | // position: relative; |
| 455 | // margin-left: 10px; | 456 | // margin-left: 10px; |
| 456 | // // transform: scaleY(-1); | 457 | // // transform: scaleY(-1); |
| 457 | // } | 458 | // } |
| 458 | // .icon::after{ | 459 | // .icon::after{ |
| 459 | // content: ''; | 460 | // content: ''; |
| 460 | // position: absolute; | 461 | // position: absolute; |
| 461 | // top: -6.5px; | 462 | // top: -6.5px; |
| 462 | // left: -5px; | 463 | // left: -5px; |
| 463 | // border-left: 5px transparent; | 464 | // border-left: 5px transparent; |
| 464 | // border-right: 5px transparent; | 465 | // border-right: 5px transparent; |
| 465 | // border-top: 5px #FFFFFF; | 466 | // border-top: 5px #FFFFFF; |
| 466 | // border-bottom: 0 transparent; | 467 | // border-bottom: 0 transparent; |
| 467 | // border-style: solid; | 468 | // border-style: solid; |
| 468 | // } | 469 | // } |
| 469 | } | 470 | } |
| 470 | .priceBox{ | 471 | .priceBox{ |
| 471 | display: flex; | 472 | display: flex; |
| 472 | justify-content: space-between; | 473 | justify-content: space-between; |
| 473 | align-items: center; | 474 | align-items: center; |
| 474 | // margin-top: 26px; | 475 | // margin-top: 26px; |
| 475 | width: 100%; | 476 | width: 100%; |
| 476 | font-size: 14px; | 477 | font-size: 14px; |
| 477 | color: #999999; | 478 | color: #999999; |
| 478 | .maxCount{ | 479 | .maxCount{ |
| 479 | color: #999999; | 480 | color: #999999; |
| 480 | font-size: 24rpx; | 481 | font-size: 24rpx; |
| 481 | } | 482 | } |
| 482 | .price{ | 483 | .price{ |
| 483 | color: #FF6B4A; | 484 | color: #FF6B4A; |
| 484 | font-size: 28rpx; | 485 | font-size: 28rpx; |
| 485 | } | 486 | } |
| 486 | .counter{ | 487 | .counter{ |
| 487 | display: flex; | 488 | display: flex; |
| 488 | flex-direction: row; | 489 | flex-direction: row; |
| 489 | justify-content: space-between; | 490 | justify-content: space-between; |
| 490 | align-items: center; | 491 | align-items: center; |
| 491 | font-size: 28rpx; | 492 | font-size: 28rpx; |
| 492 | color: #333333; | 493 | color: #333333; |
| 493 | width: 122rpx; | 494 | width: 122rpx; |
| 494 | .btn{ | 495 | .btn{ |
| 495 | display: flex; | 496 | display: flex; |
| 496 | justify-content: center; | 497 | justify-content: center; |
| 497 | line-height: 32rpx; | 498 | line-height: 32rpx; |
| 498 | height: 32rpx; | 499 | height: 32rpx; |
| 499 | width: 32rpx; | 500 | width: 32rpx; |
| 500 | background-color: #F2F2F2; | 501 | background-color: #F2F2F2; |
| 501 | color: #CFCFCF; | 502 | color: #CFCFCF; |
| 502 | } | 503 | } |
| 503 | } | 504 | } |
| 504 | } | 505 | } |
| 505 | } | 506 | } |
| 506 | } | 507 | } |
| 507 | } | 508 | } |
| 508 | } | 509 | } |
| 509 | 510 | ||
| 510 | .footer{ | 511 | .footer{ |
| 511 | position: fixed; | 512 | position: fixed; |
| 512 | left: 0; | 513 | left: 0; |
| 513 | bottom: 0px; | 514 | bottom: 0px; |
| 514 | height: 112rpx; | 515 | height: 112rpx; |
| 515 | width: 100%; | 516 | width: 100%; |
| 516 | background-color: #FFFFFF; | 517 | background-color: #FFFFFF; |
| 517 | font-size: 16px; | 518 | font-size: 16px; |
| 518 | display: flex; | 519 | display: flex; |
| 519 | justify-content: space-between; | 520 | justify-content: space-between; |
| 520 | align-items: center; | 521 | align-items: center; |
| 521 | .footerLeft{ | 522 | .footerLeft{ |
| 522 | display: flex; | 523 | display: flex; |
| 523 | justify-content: center; | 524 | justify-content: center; |
| 524 | align-items: center; | 525 | align-items: center; |
| 525 | width: 50%; | 526 | width: 50%; |
| 526 | color: #333333; | 527 | color: #333333; |
| 527 | text{ | 528 | text{ |
| 528 | color: #FF6B4A; | 529 | color: #FF6B4A; |
| 529 | } | 530 | } |
| 530 | } | 531 | } |
| 531 | .footerRight{ | 532 | .footerRight{ |
| 532 | display: flex; | 533 | display: flex; |
| 533 | justify-content: flex-end; | 534 | justify-content: flex-end; |
| 534 | align-items: center; | 535 | align-items: center; |
| 535 | width: 50%; | 536 | width: 50%; |
| 536 | margin-right: 26rpx; | 537 | margin-right: 26rpx; |
| 537 | .paybtn{ | 538 | .paybtn{ |
| 538 | display: flex; | 539 | display: flex; |
| 539 | justify-content: center; | 540 | justify-content: center; |
| 540 | align-items: center; | 541 | align-items: center; |
| 541 | background: #FF6B4A; | 542 | background: #FF6B4A; |
| 542 | border-radius: 20px; | 543 | border-radius: 20px; |
| 543 | border-radius: 20px; | 544 | border-radius: 20px; |
| 544 | color: #FFFFFF; | 545 | color: #FFFFFF; |
| 545 | width: 204rpx; | 546 | width: 204rpx; |
| 546 | height: 80rpx; | 547 | height: 80rpx; |
| 547 | } | 548 | } |
| 548 | } | 549 | } |
| 549 | 550 | ||
| 550 | } | 551 | } |
| 551 | } | 552 | } |
| 552 | 553 | ||
| 553 | </style> | 554 | </style> |
src/pages/frameDetail/frameDetail.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <view class="D1"> | 3 | <view class="D1"> |
| 4 | <!-- 轮播图 --> | 4 | <!-- 轮播图 --> |
| 5 | <swiper | 5 | <swiper |
| 6 | class="swiperImage" | 6 | class="swiperImage" |
| 7 | :indicator-dots="true" | 7 | :indicator-dots="true" |
| 8 | :autoplay="true" | 8 | :autoplay="true" |
| 9 | :interval="4000" | 9 | :interval="4000" |
| 10 | :duration="500" | 10 | :duration="500" |
| 11 | > | 11 | > |
| 12 | <swiper-item | 12 | <swiper-item |
| 13 | v-for="(item, index) in goodInfo.pics" | 13 | v-for="(item, index) in goodInfo.pics" |
| 14 | :key="index" | 14 | :key="index" |
| 15 | > | 15 | > |
| 16 | <image | 16 | <image |
| 17 | :src="item" | 17 | :src="item" |
| 18 | mode="scaleToFill" | 18 | mode="scaleToFill" |
| 19 | ></image> | 19 | ></image> |
| 20 | </swiper-item> | 20 | </swiper-item> |
| 21 | </swiper> | 21 | </swiper> |
| 22 | <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> | 22 | <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> |
| 23 | <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> | 23 | <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> |
| 24 | <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> | 24 | <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> |
| 25 | </view> | 25 | </view> |
| 26 | <view | 26 | <view |
| 27 | class="D2" | 27 | class="D2" |
| 28 | v-if="updateGoodType == 2 || updateGoodType == 4" | 28 | v-if="updateGoodType == 2 || updateGoodType == 4" |
| 29 | > | 29 | > |
| 30 | <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | 30 | <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> |
| 31 | <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> | 31 | <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> |
| 32 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | 32 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> |
| 33 | </view> | 33 | </view> |
| 34 | <view | 34 | <view |
| 35 | class="D2" | 35 | class="D2" |
| 36 | v-if="updateGoodType == 1" | 36 | v-if="updateGoodType == 1" |
| 37 | > | 37 | > |
| 38 | <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | 38 | <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> |
| 39 | <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> | 39 | <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> |
| 40 | <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> | 40 | <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> |
| 41 | </view> | 41 | </view> |
| 42 | <view | 42 | <view |
| 43 | class="D2" | 43 | class="D2" |
| 44 | v-if="updateGoodType == 3" | 44 | v-if="updateGoodType == 3" |
| 45 | > | 45 | > |
| 46 | <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> | 46 | <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> |
| 47 | <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> | 47 | <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> |
| 48 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> | 48 | <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> |
| 49 | </view> | 49 | </view> |
| 50 | <view class="D3"> | 50 | <view class="D3"> |
| 51 | <view class="screenBar"> | 51 | <view class="screenBar"> |
| 52 | <view | 52 | <view |
| 53 | v-for="item in screenItems" | 53 | v-for="item in screenItems" |
| 54 | :key="item.current" | 54 | :key="item.current" |
| 55 | @click="tabChange(item.current)" | 55 | @click="tabChange(item.current)" |
| 56 | > | 56 | > |
| 57 | <view | 57 | <view |
| 58 | class="screenItem" | 58 | class="screenItem" |
| 59 | v-bind:class="{ active: current === item.current }" | 59 | v-bind:class="{ active: current === item.current }" |
| 60 | >{{ item.text || '暂无' }}</view> | 60 | >{{ item.text || '暂无' }}</view> |
| 61 | </view> | 61 | </view> |
| 62 | </view> | 62 | </view> |
| 63 | <view | 63 | <view |
| 64 | class="screen-item" | 64 | class="screen-item" |
| 65 | v-if="current === 1" | 65 | v-if="current === 1" |
| 66 | > | 66 | > |
| 67 | <view class="D3_list"> | 67 | <view class="D3_list"> |
| 68 | <view | 68 | <view |
| 69 | v-for="(item) in parameter" | 69 | v-for="(item) in parameter" |
| 70 | :key="item.key" | 70 | :key="item.key" |
| 71 | > | 71 | > |
| 72 | <image | 72 | <image |
| 73 | class="D3_image" | 73 | class="D3_image" |
| 74 | v-bind:src="item.img" | 74 | v-bind:src="item.img" |
| 75 | ></image> | 75 | ></image> |
| 76 | <span>{{item.standard || '暂无'}}</span> | 76 | <span>{{item.standard || '暂无'}}</span> |
| 77 | <span>{{item.slength || '暂无'}}</span> | 77 | <span>{{item.slength || '暂无'}}</span> |
| 78 | </view> | 78 | </view> |
| 79 | </view> | 79 | </view> |
| 80 | </view> | 80 | </view> |
| 81 | <view | 81 | <view |
| 82 | class="screen-item" | 82 | class="screen-item" |
| 83 | v-if="current === 0" | 83 | v-if="current === 0" |
| 84 | > | 84 | > |
| 85 | <view class="D3_list"> | 85 | <view class="D3_list"> |
| 86 | <!-- <block> | 86 | <!-- <block> |
| 87 | <view>主体</view> | 87 | <view>主体</view> |
| 88 | <view>商品产地：韩国</view> | 88 | <view>商品产地：韩国</view> |
| 89 | <view>包装清单：彩色隐形 * 1</view> | 89 | <view>包装清单：彩色隐形 * 1</view> |
| 90 | </block> --> | 90 | </block> --> |
| 91 | <!-- 迭代时建议配合接口修改 为数组 --> | 91 | <!-- 迭代时建议配合接口修改 为数组 --> |
| 92 | <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> | 92 | <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> |
| 93 | <view class=""> | 93 | <view class=""> |
| 94 | 年龄：<view | 94 | 年龄：<view |
| 95 | v-for="(item,index) in tag.prod_tag_age" | 95 | v-for="(item,index) in tag.prod_tag_age" |
| 96 | :key="index" | 96 | :key="index" |
| 97 | > | 97 | > |
| 98 | {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> | 98 | {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> |
| 99 | </view> | 99 | </view> |
| 100 | </view> | 100 | </view> |
| 101 | </view> | 101 | </view> |
| 102 | <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> | 102 | <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> |
| 103 | <view class=""> | 103 | <view class=""> |
| 104 | 颜色：<view | 104 | 颜色：<view |
| 105 | v-for="(item,index) in tag.prod_tag_color" | 105 | v-for="(item,index) in tag.prod_tag_color" |
| 106 | :key="index" | 106 | :key="index" |
| 107 | > | 107 | > |
| 108 | {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> | 108 | {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> |
| 109 | </view> | 109 | </view> |
| 110 | </view> | 110 | </view> |
| 111 | </view> | 111 | </view> |
| 112 | <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> | 112 | <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> |
| 113 | <view class=""> | 113 | <view class=""> |
| 114 | 脸型：<view | 114 | 脸型：<view |
| 115 | v-for="(item,index) in tag.prod_tag_face" | 115 | v-for="(item,index) in tag.prod_tag_face" |
| 116 | :key="index" | 116 | :key="index" |
| 117 | > | 117 | > |
| 118 | {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> | 118 | {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> |
| 119 | </view> | 119 | </view> |
| 120 | </view> | 120 | </view> |
| 121 | </view> | 121 | </view> |
| 122 | <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> | 122 | <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> |
| 123 | <view class=""> | 123 | <view class=""> |
| 124 | 赠品：<view | 124 | 赠品：<view |
| 125 | v-for="(item,index) in tag.prod_tag_freesend" | 125 | v-for="(item,index) in tag.prod_tag_freesend" |
| 126 | :key="index" | 126 | :key="index" |
| 127 | > | 127 | > |
| 128 | {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> | 128 | {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> |
| 129 | </view> | 129 | </view> |
| 130 | </view> | 130 | </view> |
| 131 | </view> | 131 | </view> |
| 132 | <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> | 132 | <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> |
| 133 | <view class=""> | 133 | <view class=""> |
| 134 | 保险：<view | 134 | 保险：<view |
| 135 | v-for="(item,index) in tag.prod_tag_insurance" | 135 | v-for="(item,index) in tag.prod_tag_insurance" |
| 136 | :key="index" | 136 | :key="index" |
| 137 | > | 137 | > |
| 138 | {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> | 138 | {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> |
| 139 | </view> | 139 | </view> |
| 140 | </view> | 140 | </view> |
| 141 | </view> | 141 | </view> |
| 142 | <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> | 142 | <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> |
| 143 | <view class=""> | 143 | <view class=""> |
| 144 | 材质：<view | 144 | 材质：<view |
| 145 | v-for="(item,index) in tag.prod_tag_metal" | 145 | v-for="(item,index) in tag.prod_tag_metal" |
| 146 | :key="index" | 146 | :key="index" |
| 147 | > | 147 | > |
| 148 | {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> | 148 | {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> |
| 149 | </view> | 149 | </view> |
| 150 | </view> | 150 | </view> |
| 151 | </view> | 151 | </view> |
| 152 | <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> | 152 | <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> |
| 153 | <view class=""> | 153 | <view class=""> |
| 154 | 个性：<view | 154 | 个性：<view |
| 155 | v-for="(item,index) in tag.prod_tag_personal" | 155 | v-for="(item,index) in tag.prod_tag_personal" |
| 156 | :key="index" | 156 | :key="index" |
| 157 | > | 157 | > |
| 158 | {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> | 158 | {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> |
| 159 | </view> | 159 | </view> |
| 160 | </view> | 160 | </view> |
| 161 | </view> | 161 | </view> |
| 162 | <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> | 162 | <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> |
| 163 | <view class=""> | 163 | <view class=""> |
| 164 | 场景：<view | 164 | 场景：<view |
| 165 | v-for="(item,index) in tag.prod_tag_sense" | 165 | v-for="(item,index) in tag.prod_tag_sense" |
| 166 | :key="index" | 166 | :key="index" |
| 167 | > | 167 | > |
| 168 | {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> | 168 | {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> |
| 169 | </view> | 169 | </view> |
| 170 | </view> | 170 | </view> |
| 171 | </view> | 171 | </view> |
| 172 | <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> | 172 | <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> |
| 173 | <view class=""> | 173 | <view class=""> |
| 174 | 性别：<view | 174 | 性别：<view |
| 175 | v-for="(item,index) in tag.prod_tag_sex" | 175 | v-for="(item,index) in tag.prod_tag_sex" |
| 176 | :key="index" | 176 | :key="index" |
| 177 | > | 177 | > |
| 178 | {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> | 178 | {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> |
| 179 | </view> | 179 | </view> |
| 180 | </view> | 180 | </view> |
| 181 | </view> | 181 | </view> |
| 182 | <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> | 182 | <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> |
| 183 | <view class=""> | 183 | <view class=""> |
| 184 | 风格：<view | 184 | 风格：<view |
| 185 | v-for="(item,index) in tag.prod_tag_style" | 185 | v-for="(item,index) in tag.prod_tag_style" |
| 186 | :key="index" | 186 | :key="index" |
| 187 | > | 187 | > |
| 188 | {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> | 188 | {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> |
| 189 | </view> | 189 | </view> |
| 190 | </view> | 190 | </view> |
| 191 | </view> | 191 | </view> |
| 192 | <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> | 192 | <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> |
| 193 | <view class=""> | 193 | <view class=""> |
| 194 | 重量：<view | 194 | 重量：<view |
| 195 | v-for="(item,index) in tag.prod_tag_weight" | 195 | v-for="(item,index) in tag.prod_tag_weight" |
| 196 | :key="index" | 196 | :key="index" |
| 197 | > | 197 | > |
| 198 | {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> | 198 | {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> |
| 199 | </view> | 199 | </view> |
| 200 | </view> | 200 | </view> |
| 201 | </view> | 201 | </view> |
| 202 | </view> | 202 | </view> |
| 203 | </view> | 203 | </view> |
| 204 | <view | 204 | <view |
| 205 | class="screen-item " | 205 | class="screen-item " |
| 206 | v-if="current ===2" | 206 | v-if="current ===2" |
| 207 | > | 207 | > |
| 208 | <view class="customerService"> | 208 | <view class="customerService"> |
| 209 | <view class="serviceItem"> | 209 | <view class="serviceItem"> |
| 210 | <view class="title"> | 210 | <view class="title"> |
| 211 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 211 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 212 | <text class="titleText">卖家服务</text> | 212 | <text class="titleText">卖家服务</text> |
| 213 | </view> | 213 | </view> |
| 214 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> | 214 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> |
| 215 | </view> | 215 | </view> |
| 216 | <view class="serviceItem"> | 216 | <view class="serviceItem"> |
| 217 | <view class="title"> | 217 | <view class="title"> |
| 218 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 218 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 219 | <text class="titleText">平台承诺</text> | 219 | <text class="titleText">平台承诺</text> |
| 220 | </view> | 220 | </view> |
| 221 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> | 221 | <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> |
| 222 | </view> | 222 | </view> |
| 223 | <view class="serviceItem"> | 223 | <view class="serviceItem"> |
| 224 | <view class="title"> | 224 | <view class="title"> |
| 225 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> | 225 | <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> |
| 226 | <text class="titleText">正品保证</text> | 226 | <text class="titleText">正品保证</text> |
| 227 | </view> | 227 | </view> |
| 228 | <view class="itemContent">向您保证所售商品均为正品行货</view> | 228 | <view class="itemContent">向您保证所售商品均为正品行货</view> |
| 229 | </view> | 229 | </view> |
| 230 | <view class="serviceItem2"> | 230 | <view class="serviceItem2"> |
| 231 | <view class="title"> | 231 | <view class="title"> |
| 232 | <text class="titleText">权利申明</text> | 232 | <text class="titleText">权利申明</text> |
| 233 | </view> | 233 | </view> |
| 234 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> | 234 | <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> |
| 235 | </view> | 235 | </view> |
| 236 | <view class="serviceItem2"> | 236 | <view class="serviceItem2"> |
| 237 | <view class="title"> | 237 | <view class="title"> |
| 238 | <text class="titleText">价格保证</text> | 238 | <text class="titleText">价格保证</text> |
| 239 | </view> | 239 | </view> |
| 240 | <view class="itemContent"> | 240 | <view class="itemContent"> |
| 241 | <view class="itemContent-child"> | 241 | <view class="itemContent-child"> |
| 242 | <text class="contentTitle">平台价:</text> | 242 | <text class="contentTitle">平台价:</text> |
| 243 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 243 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 244 | </view> | 244 | </view> |
| 245 | <view class="itemContent-child"> | 245 | <view class="itemContent-child"> |
| 246 | <text class="contentTitle">划线价:</text> | 246 | <text class="contentTitle">划线价:</text> |
| 247 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 247 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 248 | </view> | 248 | </view> |
| 249 | <view class="itemContent-child"> | 249 | <view class="itemContent-child"> |
| 250 | <text class="contentTitle">平折扣:</text> | 250 | <text class="contentTitle">平折扣:</text> |
| 251 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 251 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 252 | </view> | 252 | </view> |
| 253 | <view class="itemContent-child"> | 253 | <view class="itemContent-child"> |
| 254 | <text class="contentTitle">异常问题:</text> | 254 | <text class="contentTitle">异常问题:</text> |
| 255 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> | 255 | <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> |
| 256 | </view> | 256 | </view> |
| 257 | 257 | ||
| 258 | </view> | 258 | </view> |
| 259 | </view> | 259 | </view> |
| 260 | </view> | 260 | </view> |
| 261 | </view> | 261 | </view> |
| 262 | </view> | 262 | </view> |
| 263 | <view | 263 | <view |
| 264 | class="D4" | 264 | class="D4" |
| 265 | v-if="current !==2" | 265 | v-if="current !==2" |
| 266 | > | 266 | > |
| 267 | <view class="D4_esvalue"> | 267 | <view class="D4_esvalue"> |
| 268 | <view>{{esvalue}} {{goodInfo.judgeInfo.good}}</view> | 268 | <view>{{esvalue}} {{goodInfo.judgeInfo.good}}</view> |
| 269 | <view class="D4_2"> | 269 | <view class="D4_2"> |
| 270 | <view | 270 | <view |
| 271 | class="star" | 271 | class="star" |
| 272 | v-for="o in starCount" | 272 | v-for="o in starCount" |
| 273 | :key="o" | 273 | :key="o" |
| 274 | > | 274 | > |
| 275 | <image | 275 | <image |
| 276 | src="../../static/img/detail/d_star.png" | 276 | src="../../static/img/detail/d_star.png" |
| 277 | mode="aspectFill" | 277 | mode="aspectFill" |
| 278 | style="height: 26rpx; width: 28rpx;" | 278 | style="height: 26rpx; width: 28rpx;" |
| 279 | ></image> | 279 | ></image> |
| 280 | </view> | 280 | </view> |
| 281 | </view> | 281 | </view> |
| 282 | </view> | 282 | </view> |
| 283 | <view class="D4_list"> | 283 | <view class="D4_list"> |
| 284 | <view | 284 | <view |
| 285 | v-for="(assess) in goodInfo.judge_tag" | 285 | v-for="(assess) in goodInfo.judge_tag" |
| 286 | :key="assess.key" | 286 | :key="assess.key" |
| 287 | >{{assess.name}}</view> | 287 | >{{assess.name}}</view> |
| 288 | </view> | 288 | </view> |
| 289 | </view> | 289 | </view> |
| 290 | <view | 290 | <view |
| 291 | class="D5" | 291 | class="D5" |
| 292 | v-if="current !==2" | 292 | v-if="current !==2" |
| 293 | > | 293 | > |
| 294 | <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> | 294 | <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> |
| 295 | <image src="/static/img/detail/hr.png"></image> | 295 | <image src="/static/img/detail/hr.png"></image> |
| 296 | <view>商品详细</view> | 296 | <view>商品详细</view> |
| 297 | <image src="/static/img/detail/hr.png"></image> | 297 | <image src="/static/img/detail/hr.png"></image> |
| 298 | </view> | 298 | </view> |
| 299 | <view class="D5_all" v-html="test"> | 299 | <view class="D5_all" v-html="test"> |
| 300 | <!-- <block> | 300 | <!-- <block> |
| 301 | <rich-text :nodes="goodInfo.prodIntro1"></rich-text> | 301 | <rich-text :nodes="goodInfo.prodIntro1"></rich-text> |
| 302 | </block> --> | 302 | </block> --> |
| 303 | </view> | 303 | </view> |
| 304 | </view> | 304 | </view> |
| 305 | <!-- 底部菜单 --> | 305 | <!-- 底部菜单 --> |
| 306 | <view class="botton"> | 306 | <view class="botton"> |
| 307 | <view | 307 | <view |
| 308 | @tap="toCart()" | 308 | @tap="toCart()" |
| 309 | class="botton_1" | 309 | class="botton_1" |
| 310 | > | 310 | > |
| 311 | <image v-bind:src="imgShop.img"></image> | 311 | <image v-bind:src="imgShop.img"></image> |
| 312 | <view class="botton_image">购物车</view> | 312 | <view class="botton_image">购物车</view> |
| 313 | </view> | 313 | </view> |
| 314 | <view class="botton_2"> | 314 | <view class="botton_2"> |
| 315 | <view | 315 | <view |
| 316 | class="botton_input" | 316 | class="botton_input" |
| 317 | @tap="addCart()" | 317 | @tap="addCart()" |
| 318 | >加入购物车</view> | 318 | >加入购物车</view> |
| 319 | <view | 319 | <view |
| 320 | class="botton_now" | 320 | class="botton_now" |
| 321 | @tap="goPerchase()" | 321 | @tap="goPerchase()" |
| 322 | >立即购买</view> | 322 | >立即购买</view> |
| 323 | </view> | 323 | </view> |
| 324 | </view> | 324 | </view> |
| 325 | </view> | 325 | </view> |
| 326 | </template> | 326 | </template> |
| 327 | 327 | ||
| 328 | <script> | 328 | <script> |
| 329 | import store from '@/store' | 329 | import store from '@/store' |
| 330 | export default { | 330 | export default { |
| 331 | data () { | 331 | data () { |
| 332 | return { | 332 | return { |
| 333 | test: '', | 333 | test: '', |
| 334 | goodType: 2, | 334 | goodType: 2, |
| 335 | pid: 0, | 335 | pid: 0, |
| 336 | // 购物车数据 | 336 | // 购物车数据 |
| 337 | addCartList: { | 337 | addCartList: { |
| 338 | mp_id: 0, | 338 | mp_id: 0, |
| 339 | uid: 0, | ||
| 340 | sk_id: 0, | 339 | sk_id: 0, |
| 341 | num: 1, | 340 | num: 1, |
| 342 | price: '' | 341 | price: '' |
| 343 | }, | 342 | }, |
| 344 | screenItems: [ | 343 | screenItems: [ |
| 345 | { current: 0, text: '商品介绍' }, | 344 | { current: 0, text: '商品介绍' }, |
| 346 | { current: 1, text: '规格参数' }, | 345 | { current: 1, text: '规格参数' }, |
| 347 | { current: 2, text: '售后保障' } | 346 | { current: 2, text: '售后保障' } |
| 348 | ], | 347 | ], |
| 349 | current: 0, | 348 | current: 0, |
| 350 | starCount: 5, | 349 | starCount: 5, |
| 351 | parameter: [ | 350 | parameter: [ |
| 352 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, | 351 | { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, |
| 353 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, | 352 | { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, |
| 354 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, | 353 | { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, |
| 355 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, | 354 | { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, |
| 356 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, | 355 | { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, |
| 357 | { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } | 356 | { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } |
| 358 | ], | 357 | ], |
| 359 | esvalue: '宝贝好评率', | 358 | esvalue: '宝贝好评率', |
| 360 | introduction: { | 359 | introduction: { |
| 361 | material: '钛合金', | 360 | material: '钛合金', |
| 362 | func: '抗疲劳/防辐射', | 361 | func: '抗疲劳/防辐射', |
| 363 | rate: '男/女' | 362 | rate: '男/女' |
| 364 | }, | 363 | }, |
| 365 | imgAll: '/static/img/detail/d8.png', | 364 | imgAll: '/static/img/detail/d8.png', |
| 366 | photoes: [ | 365 | photoes: [ |
| 367 | { value: '日常办公', img: '/static/img/detail/d9.png' }, | 366 | { value: '日常办公', img: '/static/img/detail/d9.png' }, |
| 368 | { value: '上网', img: '/static/img/detail/d10.png' }, | 367 | { value: '上网', img: '/static/img/detail/d10.png' }, |
| 369 | { value: '追剧', img: '/static/img/detail/d11.png' }, | 368 | { value: '追剧', img: '/static/img/detail/d11.png' }, |
| 370 | { value: '玩游戏', img: '/static/img/detail/d12.png' } | 369 | { value: '玩游戏', img: '/static/img/detail/d12.png' } |
| 371 | ], | 370 | ], |
| 372 | imgDetail: '/static/img/detail/d13.png', | 371 | imgDetail: '/static/img/detail/d13.png', |
| 373 | imgShop: { | 372 | imgShop: { |
| 374 | img: '/static/tab-cart.png', | 373 | img: '/static/tab-cart.png', |
| 375 | IsShown: false | 374 | IsShown: false |
| 376 | }, | 375 | }, |
| 377 | tag: { | 376 | tag: { |
| 378 | prod_tag_freesend: [{ | 377 | prod_tag_freesend: [{ |
| 379 | label: '眼镜盒', | 378 | label: '眼镜盒', |
| 380 | value: '262' | 379 | value: '262' |
| 381 | }] | 380 | }] |
| 382 | } | 381 | } |
| 383 | } | 382 | } |
| 384 | }, | 383 | }, |
| 385 | onLoad: function ({ pid }) { | 384 | onLoad: function ({ pid }) { |
| 386 | this.pid = pid | 385 | this.pid = pid |
| 387 | store.dispatch('read/fetch', { | 386 | store.dispatch('read/fetch', { |
| 388 | pid | 387 | pid |
| 389 | }).then(() => { | 388 | }).then(() => { |
| 390 | this.parameter[0].slength = `${this.goodInfo.frame_width}mm` | 389 | this.parameter[0].slength = `${this.goodInfo.frame_width}mm` |
| 391 | this.parameter[1].slength = `${this.goodInfo.glass_width}mm` | 390 | this.parameter[1].slength = `${this.goodInfo.glass_width}mm` |
| 392 | this.parameter[2].slength = `${this.goodInfo.glass_height}mm` | 391 | this.parameter[2].slength = `${this.goodInfo.glass_height}mm` |
| 393 | this.parameter[3].slength = `${this.goodInfo.nose_width}mm` | 392 | this.parameter[3].slength = `${this.goodInfo.nose_width}mm` |
| 394 | this.parameter[4].slength = `${this.goodInfo.leg_long}mm` | 393 | this.parameter[4].slength = `${this.goodInfo.leg_long}mm` |
| 395 | this.parameter[5].slength = `${this.goodInfo.weight}mm` | 394 | this.parameter[5].slength = `${this.goodInfo.weight}mm` |
| 396 | this.tag = this.goodInfo.tag | 395 | this.tag = this.goodInfo.tag |
| 397 | this.test = this.goodInfo.prodIntro1 | 396 | this.test = this.goodInfo.prodIntro1 |
| 398 | this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') | 397 | this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') |
| 399 | // addCart | 398 | // addCart |
| 400 | this.addCartList.price = this.goodInfo.p_sale_price | 399 | this.addCartList.price = this.goodInfo.p_sale_price |
| 401 | this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id | 400 | this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id |
| 402 | this.addCartList.mp_id = this.goodInfo.glassData.mp_id | 401 | this.addCartList.mp_id = this.goodInfo.glassData.mp_id |
| 403 | this.addCartList.uid = this.$store.state.user.userInfo.uid | ||
| 404 | }) | 402 | }) |
| 405 | // console.log(this.$store.state.user.userInfo.uid + 'ssss') | 403 | // console.log(this.$store.state.user.userInfo.uid + 'ssss') |
| 406 | }, | 404 | }, |
| 407 | computed: { | 405 | computed: { |
| 408 | updateGoodType () { | 406 | updateGoodType () { |
| 409 | return this.goodType | 407 | return this.goodType |
| 410 | }, | 408 | }, |
| 411 | goodInfo () { | 409 | goodInfo () { |
| 412 | console.log(this.$store.state.read.goodInfo) | 410 | console.log(this.$store.state.read.goodInfo) |
| 413 | return this.$store.state.read.goodInfo | 411 | return this.$store.state.read.goodInfo |
| 414 | } | 412 | } |
| 415 | }, | 413 | }, |
| 416 | methods: { | 414 | methods: { |
| 417 | // 前往购物车 | 415 | // 前往购物车 |
| 418 | toCart() { | 416 | toCart() { |
| 419 | uni.switchTab({ | 417 | uni.switchTab({ |
| 420 | url: '/pages/cart/cart', | 418 | url: '/pages/cart/cart', |
| 421 | success: res => {}, | 419 | success: res => {}, |
| 422 | fail: (error) => { console.log('跳转购物车失败======>', error) }, | 420 | fail: (error) => { console.log('跳转购物车失败======>', error) }, |
| 423 | complete: () => { console.log('toCart') } | 421 | complete: () => { console.log('toCart') } |
| 424 | }) | 422 | }) |
| 425 | }, | 423 | }, |
| 426 | // 加入购物车 | 424 | // 加入购物车 |
| 427 | addCart () { | 425 | addCart () { |
| 428 | store.dispatch('cart/addCart', { | 426 | store.dispatch('cart/addCart', { |
| 429 | uid: this.$store.state.user.userInfo.uid, | 427 | uid: this.$store.state.user.userInfo.uid, |
| 430 | openid: this.$store.state.user.userInfo.openid, | 428 | openid: this.$store.state.user.userInfo.openid, |
| 431 | mp_id: this.addCartList.mp_id, | 429 | mp_id: this.addCartList.mp_id, |
| 432 | sk_id: this.addCartList.sk_id, | 430 | sk_id: this.addCartList.sk_id, |
| 433 | num: this.addCartList.num, | 431 | num: this.addCartList.num, |
| 434 | pid: this.pid, | 432 | pid: this.pid, |
| 435 | price: this.addCartList.price | 433 | price: this.addCartList.price |
| 436 | }) | 434 | }) |
| 437 | store.dispatch('cart/getCartList', { | 435 | store.dispatch('cart/getCartList', { |
| 438 | uid: this.$store.state.user.userInfo.uid // 用户id | 436 | uid: this.$store.state.user.userInfo.uid // 用户id |
| 439 | }) | 437 | }) |
| 440 | }, | 438 | }, |
| 441 | goPerchase () { | 439 | goPerchase () { |
| 442 | // switch (this.updateGoodType) { | 440 | // switch (this.updateGoodType) { |
| 443 | // case '1': | 441 | // case '1': |
| 444 | console.log('goPerchase') | 442 | console.log('goPerchase') |
| 445 | uni.navigateTo({ | 443 | uni.navigateTo({ |
| 446 | url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, | 444 | url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, |
| 447 | success: res => {}, | 445 | success: res => {}, |
| 448 | fail: (error) => { console.log('跳转参数选择失败======>', error) }, | 446 | fail: (error) => { console.log('跳转参数选择失败======>', error) }, |
| 449 | complete: () => { console.log('goPerchase') } | 447 | complete: () => { console.log('goPerchase') } |
| 450 | }) | 448 | }) |
| 451 | // break | 449 | // break |
| 452 | // case '2': | 450 | // case '2': |
| 453 | // uni.navigateTo({ | 451 | // uni.navigateTo({ |
| 454 | // url: '../detailStandard/detailStandard_k', | 452 | // url: '../detailStandard/detailStandard_k', |
| 455 | // success: res => {}, | 453 | // success: res => {}, |
| 456 | // fail: () => {}, | 454 | // fail: () => {}, |
| 457 | // complete: () => {} | 455 | // complete: () => {} |
| 458 | // }) | 456 | // }) |
| 459 | // break | 457 | // break |
| 460 | // case '3': | 458 | // case '3': |
| 461 | // uni.navigateTo({ | 459 | // uni.navigateTo({ |
| 462 | // url: '../purchaseLenses/purchaseLenses', | 460 | // url: '../purchaseLenses/purchaseLenses', |
| 463 | // success: res => {}, | 461 | // success: res => {}, |
| 464 | // fail: () => {}, | 462 | // fail: () => {}, |
| 465 | // complete: () => {} | 463 | // complete: () => {} |
| 466 | // }) | 464 | // }) |
| 467 | // break | 465 | // break |
| 468 | // case '4': | 466 | // case '4': |
| 469 | // uni.navigateTo({ | 467 | // uni.navigateTo({ |
| 470 | // url: '../detailStandard/detailStandard_sun', | 468 | // url: '../detailStandard/detailStandard_sun', |
| 471 | // success: res => {}, | 469 | // success: res => {}, |
| 472 | // fail: () => {}, | 470 | // fail: () => {}, |
| 473 | // complete: () => {} | 471 | // complete: () => {} |
| 474 | // }) | 472 | // }) |
| 475 | // break | 473 | // break |
| 476 | // default : | 474 | // default : |
| 477 | // break | 475 | // break |
| 478 | // } | 476 | // } |
| 479 | }, | 477 | }, |
| 480 | tabChange (e) { | 478 | tabChange (e) { |
| 481 | if (this.current !== e) { | 479 | if (this.current !== e) { |
| 482 | this.current = e | 480 | this.current = e |
| 483 | } | 481 | } |
| 484 | } | 482 | } |
| 485 | } | 483 | } |
| 486 | } | 484 | } |
| 487 | </script> | 485 | </script> |
| 488 | <style lang='scss'> | 486 | <style lang='scss'> |
| 489 | .container { | 487 | .container { |
| 490 | background-color: #f8f8f8; | 488 | background-color: #f8f8f8; |
| 491 | } | 489 | } |
| 492 | .D1, | 490 | .D1, |
| 493 | .D2, | 491 | .D2, |
| 494 | .D3, | 492 | .D3, |
| 495 | .D4, | 493 | .D4, |
| 496 | .D6 { | 494 | .D6 { |
| 497 | background: #ffffff; | 495 | background: #ffffff; |
| 498 | margin-bottom: 10px; | 496 | margin-bottom: 10px; |
| 499 | padding: 8px 20px 8px 20px; | 497 | padding: 8px 20px 8px 20px; |
| 500 | box-sizing: border-box; | 498 | box-sizing: border-box; |
| 501 | .swiperImage { | 499 | .swiperImage { |
| 502 | width: 684rpx; | 500 | width: 684rpx; |
| 503 | height: 480rpx; | 501 | height: 480rpx; |
| 504 | image { | 502 | image { |
| 505 | max-width: 100%; | 503 | max-width: 100%; |
| 506 | max-height: 100%; | 504 | max-height: 100%; |
| 507 | border-radius: 16rpx; | 505 | border-radius: 16rpx; |
| 508 | } | 506 | } |
| 509 | } | 507 | } |
| 510 | } | 508 | } |
| 511 | .D5 { | 509 | .D5 { |
| 512 | background: #ffffff; | 510 | background: #ffffff; |
| 513 | padding: 8px 20px 8px 20px; | 511 | padding: 8px 20px 8px 20px; |
| 514 | box-sizing: border-box; | 512 | box-sizing: border-box; |
| 515 | } | 513 | } |
| 516 | .swiperImage { | 514 | .swiperImage { |
| 517 | width: 100%; | 515 | width: 100%; |
| 518 | height: 560rpx; | 516 | height: 560rpx; |
| 519 | .swiper-item { | 517 | .swiper-item { |
| 520 | width: 100%; | 518 | width: 100%; |
| 521 | image { | 519 | image { |
| 522 | width: 100%; | 520 | width: 100%; |
| 523 | } | 521 | } |
| 524 | } | 522 | } |
| 525 | } | 523 | } |
| 526 | .D1 { | 524 | .D1 { |
| 527 | .D1_price { | 525 | .D1_price { |
| 528 | color: #eb5d3b; | 526 | color: #eb5d3b; |
| 529 | font-size: 18px; | 527 | font-size: 18px; |
| 530 | margin-top: 5px; | 528 | margin-top: 5px; |
| 531 | font-family: "PingFangSC-Semibold"; | 529 | font-family: "PingFangSC-Semibold"; |
| 532 | display: flex; | 530 | display: flex; |
| 533 | justify-content: space-between; | 531 | justify-content: space-between; |
| 534 | .D1_number { | 532 | .D1_number { |
| 535 | color: #999999; | 533 | color: #999999; |
| 536 | font-size: 14px; | 534 | font-size: 14px; |
| 537 | font-family: "PingFangSC-Regular"; | 535 | font-family: "PingFangSC-Regular"; |
| 538 | } | 536 | } |
| 539 | } | 537 | } |
| 540 | .D1_name { | 538 | .D1_name { |
| 541 | font-size: 16px; | 539 | font-size: 16px; |
| 542 | font-family: "PingFangSC-Semibold"; | 540 | font-family: "PingFangSC-Semibold"; |
| 543 | margin-top: 5px; | 541 | margin-top: 5px; |
| 544 | .D1_name1 { | 542 | .D1_name1 { |
| 545 | font-weight: bold; | 543 | font-weight: bold; |
| 546 | font-size: 16px; | 544 | font-size: 16px; |
| 547 | color: #333333; | 545 | color: #333333; |
| 548 | } | 546 | } |
| 549 | } | 547 | } |
| 550 | .D1_spans { | 548 | .D1_spans { |
| 551 | font-size: 10px; | 549 | font-size: 10px; |
| 552 | color: #999999; | 550 | color: #999999; |
| 553 | margin-top: 5px; | 551 | margin-top: 5px; |
| 554 | span { | 552 | span { |
| 555 | height: 14px; | 553 | height: 14px; |
| 556 | margin-right: 10px; | 554 | margin-right: 10px; |
| 557 | } | 555 | } |
| 558 | } | 556 | } |
| 559 | } | 557 | } |
| 560 | .D2 { | 558 | .D2 { |
| 561 | font-size: 14px; | 559 | font-size: 14px; |
| 562 | font-family: "PingFangSC-Regular"; | 560 | font-family: "PingFangSC-Regular"; |
| 563 | view { | 561 | view { |
| 564 | height: 24px; | 562 | height: 24px; |
| 565 | } | 563 | } |
| 566 | .D2_span1 { | 564 | .D2_span1 { |
| 567 | color: #999999; | 565 | color: #999999; |
| 568 | } | 566 | } |
| 569 | .D2_span2 { | 567 | .D2_span2 { |
| 570 | color: #333333; | 568 | color: #333333; |
| 571 | } | 569 | } |
| 572 | } | 570 | } |
| 573 | .D3 { | 571 | .D3 { |
| 574 | .screenBar { | 572 | .screenBar { |
| 575 | width: 670rpx; | 573 | width: 670rpx; |
| 576 | margin-top: 20rpx; | 574 | margin-top: 20rpx; |
| 577 | margin-bottom: 24rpx; | 575 | margin-bottom: 24rpx; |
| 578 | display: flex; | 576 | display: flex; |
| 579 | flex-direction: row; | 577 | flex-direction: row; |
| 580 | justify-content: space-between; | 578 | justify-content: space-between; |
| 581 | align-items: center; | 579 | align-items: center; |
| 582 | font-size: 14px; | 580 | font-size: 14px; |
| 583 | color: #333333; | 581 | color: #333333; |
| 584 | transition: all 0.2s; | 582 | transition: all 0.2s; |
| 585 | } | 583 | } |
| 586 | .screen-item { | 584 | .screen-item { |
| 587 | font-size: 32rpx; | 585 | font-size: 32rpx; |
| 588 | color: #333333; | 586 | color: #333333; |
| 589 | display: flex; | 587 | display: flex; |
| 590 | transition: all 0.2s; | 588 | transition: all 0.2s; |
| 591 | .D3_list { | 589 | .D3_list { |
| 592 | margin-bottom: 4px; | 590 | margin-bottom: 4px; |
| 593 | } | 591 | } |
| 594 | .D3_list view { | 592 | .D3_list view { |
| 595 | display: flex; | 593 | display: flex; |
| 596 | align-content: center; | 594 | align-content: center; |
| 597 | font-size: 14px; | 595 | font-size: 14px; |
| 598 | color: #333333; | 596 | color: #333333; |
| 599 | } | 597 | } |
| 600 | .D3_list image { | 598 | .D3_list image { |
| 601 | width: 50px; | 599 | width: 50px; |
| 602 | height: 25px; | 600 | height: 25px; |
| 603 | margin-right: 6px; | 601 | margin-right: 6px; |
| 604 | } | 602 | } |
| 605 | .D3_list span { | 603 | .D3_list span { |
| 606 | margin-left: 6px; | 604 | margin-left: 6px; |
| 607 | margin-right: 5px; | 605 | margin-right: 5px; |
| 608 | font-family: "PingFangSC-Regular"; | 606 | font-family: "PingFangSC-Regular"; |
| 609 | } | 607 | } |
| 610 | } | 608 | } |
| 611 | .active { | 609 | .active { |
| 612 | border-bottom: 4rpx solid #ff6b4a; | 610 | border-bottom: 4rpx solid #ff6b4a; |
| 613 | } | 611 | } |
| 614 | .customerService { | 612 | .customerService { |
| 615 | margin-bottom: 90rpx; | 613 | margin-bottom: 90rpx; |
| 616 | .serviceItem { | 614 | .serviceItem { |
| 617 | margin-bottom: 32rpx; | 615 | margin-bottom: 32rpx; |
| 618 | .title { | 616 | .title { |
| 619 | display: flex; | 617 | display: flex; |
| 620 | flex-direction: row; | 618 | flex-direction: row; |
| 621 | align-items: center; | 619 | align-items: center; |
| 622 | .titleText { | 620 | .titleText { |
| 623 | font-size: 14px; | 621 | font-size: 14px; |
| 624 | color: #333333; | 622 | color: #333333; |
| 625 | margin-bottom: 12rpx; | 623 | margin-bottom: 12rpx; |
| 626 | } | 624 | } |
| 627 | } | 625 | } |
| 628 | .itemContent { | 626 | .itemContent { |
| 629 | font-size: 14px; | 627 | font-size: 14px; |
| 630 | color: #999999; | 628 | color: #999999; |
| 631 | margin-left: 18rpx; | 629 | margin-left: 18rpx; |
| 632 | } | 630 | } |
| 633 | } | 631 | } |
| 634 | .serviceItem2 { | 632 | .serviceItem2 { |
| 635 | margin-left: 18rpx; | 633 | margin-left: 18rpx; |
| 636 | margin-bottom: 32rpx; | 634 | margin-bottom: 32rpx; |
| 637 | .titleText { | 635 | .titleText { |
| 638 | font-size: 14px; | 636 | font-size: 14px; |
| 639 | color: #ff6b4a; | 637 | color: #ff6b4a; |
| 640 | } | 638 | } |
| 641 | .itemContent { | 639 | .itemContent { |
| 642 | font-size: 14px; | 640 | font-size: 14px; |
| 643 | color: #999999; | 641 | color: #999999; |
| 644 | .itemContent-child { | 642 | .itemContent-child { |
| 645 | margin-bottom: 40rpx; | 643 | margin-bottom: 40rpx; |
| 646 | .contentTitle { | 644 | .contentTitle { |
| 647 | border-bottom: 1px solid #ff6b4a; | 645 | border-bottom: 1px solid #ff6b4a; |
| 648 | } | 646 | } |
| 649 | } | 647 | } |
| 650 | } | 648 | } |
| 651 | } | 649 | } |
| 652 | } | 650 | } |
| 653 | } | 651 | } |
| 654 | .D4 { | 652 | .D4 { |
| 655 | .D4_esvalue { | 653 | .D4_esvalue { |
| 656 | font-size: 14px; | 654 | font-size: 14px; |
| 657 | color: #333333; | 655 | color: #333333; |
| 658 | display: flex; | 656 | display: flex; |
| 659 | justify-content: space-between; | 657 | justify-content: space-between; |
| 660 | margin-bottom: 10px; | 658 | margin-bottom: 10px; |
| 661 | .D4_2 { | 659 | .D4_2 { |
| 662 | width: 90px; | 660 | width: 90px; |
| 663 | display: flex; | 661 | display: flex; |
| 664 | align-items: center; | 662 | align-items: center; |
| 665 | justify-content: space-between; | 663 | justify-content: space-between; |
| 666 | } | 664 | } |
| 667 | } | 665 | } |
| 668 | .D4_esvalue view { | 666 | .D4_esvalue view { |
| 669 | font-size: 14px; | 667 | font-size: 14px; |
| 670 | color: #333333; | 668 | color: #333333; |
| 671 | font-weight: bold; | 669 | font-weight: bold; |
| 672 | } | 670 | } |
| 673 | .D4_list{ | 671 | .D4_list{ |
| 674 | display: grid; | 672 | display: grid; |
| 675 | grid-row-gap: 10px; | 673 | grid-row-gap: 10px; |
| 676 | grid-column-gap: 4px; | 674 | grid-column-gap: 4px; |
| 677 | } | 675 | } |
| 678 | .D4_list view { | 676 | .D4_list view { |
| 679 | display: flex; | 677 | display: flex; |
| 680 | justify-content: center; | 678 | justify-content: center; |
| 681 | align-items: center; | 679 | align-items: center; |
| 682 | font-size: 12px; | 680 | font-size: 12px; |
| 683 | width: 118px; | 681 | width: 118px; |
| 684 | height: 24px; | 682 | height: 24px; |
| 685 | border-radius: 2px; | 683 | border-radius: 2px; |
| 686 | background: #f2f2f2; | 684 | background: #f2f2f2; |
| 687 | color: #666666; | 685 | color: #666666; |
| 688 | // letter-spacing: 1px; | 686 | // letter-spacing: 1px; |
| 689 | } | 687 | } |
| 690 | } | 688 | } |
| 691 | .D5 { | 689 | .D5 { |
| 692 | .D5_fixed1 { | 690 | .D5_fixed1 { |
| 693 | display: flex; | 691 | display: flex; |
| 694 | justify-content: space-between; | 692 | justify-content: space-between; |
| 695 | align-content: center; | 693 | align-content: center; |
| 696 | margin-bottom: 12px; | 694 | margin-bottom: 12px; |
| 697 | view { | 695 | view { |
| 698 | font-size: 14px; | 696 | font-size: 14px; |
| 699 | color: #333333; | 697 | color: #333333; |
| 700 | font-weight: bold; | 698 | font-weight: bold; |
| 701 | font-family: "PingFangSC-Medium"; | 699 | font-family: "PingFangSC-Medium"; |
| 702 | line-height: 24px; | 700 | line-height: 24px; |
| 703 | } | 701 | } |
| 704 | image { | 702 | image { |
| 705 | width: 240rpx; | 703 | width: 240rpx; |
| 706 | height: 3px; | 704 | height: 3px; |
| 707 | margin-top: 10px; | 705 | margin-top: 10px; |
| 708 | } | 706 | } |
| 709 | } | 707 | } |
| 710 | .D5_all { | 708 | .D5_all { |
| 711 | width: 100%; | 709 | width: 100%; |
| 712 | margin-top: 30rpx; | 710 | margin-top: 30rpx; |
| 713 | margin-right: 30rpx; | 711 | margin-right: 30rpx; |
| 714 | margin-bottom: 180rpx; | 712 | margin-bottom: 180rpx; |
| 715 | font-family: "PingFangSC-Regular"; | 713 | font-family: "PingFangSC-Regular"; |
| 716 | // border: #999999 solid 1.5px; | 714 | // border: #999999 solid 1.5px; |
| 717 | } | 715 | } |
| 718 | } | 716 | } |
| 719 | .D6 { | 717 | .D6 { |
| 720 | width: 100%; | 718 | width: 100%; |
| 721 | height: 430px; | 719 | height: 430px; |
| 722 | background: #f9f6ed; | 720 | background: #f9f6ed; |
| 723 | margin-bottom: 74px; | 721 | margin-bottom: 74px; |
| 724 | view { | 722 | view { |
| 725 | text-align: center; | 723 | text-align: center; |
| 726 | } | 724 | } |
| 727 | .D6_v1 { | 725 | .D6_v1 { |
| 728 | font-weight: bold; | 726 | font-weight: bold; |
| 729 | } | 727 | } |
| 730 | .D6_v2 { | 728 | .D6_v2 { |
| 731 | font-size: 14px; | 729 | font-size: 14px; |
| 732 | margin-bottom: 30px; | 730 | margin-bottom: 30px; |
| 733 | } | 731 | } |
| 734 | .D6_v5 { | 732 | .D6_v5 { |
| 735 | .D6_v5_s1 { | 733 | .D6_v5_s1 { |
| 736 | font-weight: bold; | 734 | font-weight: bold; |
| 737 | } | 735 | } |
| 738 | .D6_v5_s2 { | 736 | .D6_v5_s2 { |
| 739 | font-size: 14px; | 737 | font-size: 14px; |
| 740 | } | 738 | } |
| 741 | } | 739 | } |
| 742 | } | 740 | } |
| 743 | .botton { | 741 | .botton { |
| 744 | position: fixed; | 742 | position: fixed; |
| 745 | bottom: 0; | 743 | bottom: 0; |
| 746 | height: 74px; | 744 | height: 74px; |
| 747 | width: 100%; | 745 | width: 100%; |
| 748 | background: #ffffff; | 746 | background: #ffffff; |
| 749 | padding: 20px 20px 8px 20px; | 747 | padding: 20px 20px 8px 20px; |
| 750 | font-family: "PingFangSC-Regular"; | 748 | font-family: "PingFangSC-Regular"; |
| 751 | box-sizing: border-box; | 749 | box-sizing: border-box; |
| 752 | display: flex; | 750 | display: flex; |
| 753 | justify-content: space-between; | 751 | justify-content: space-between; |
| 754 | align-content: center; | 752 | align-content: center; |
| 755 | .botton_1 { | 753 | .botton_1 { |
| 756 | width: 20%; | 754 | width: 20%; |
| 757 | height: 100%; | 755 | height: 100%; |
| 758 | text-align: center; | 756 | text-align: center; |
| 759 | color: #989898; | 757 | color: #989898; |
| 760 | } | 758 | } |
| 761 | image { | 759 | image { |
| 762 | width: 60%; | 760 | width: 60%; |
| 763 | height: 30px; | 761 | height: 30px; |
| 764 | } | 762 | } |
| 765 | .botton_image { | 763 | .botton_image { |
| 766 | font-size: 12px; | 764 | font-size: 12px; |
| 767 | text-align: center; | 765 | text-align: center; |
| 768 | } | 766 | } |
| 769 | .botton_2 { | 767 | .botton_2 { |
| 770 | width: 74%; | 768 | width: 74%; |
| 771 | height: 86%; | 769 | height: 86%; |
| 772 | display: grid; | 770 | display: grid; |
| 773 | grid-template-columns: 50% 50%; | 771 | grid-template-columns: 50% 50%; |
| 774 | } | 772 | } |
| 775 | .botton_input { | 773 | .botton_input { |
| 776 | display: inline-flex; | 774 | display: inline-flex; |
| 777 | align-items: center; | 775 | align-items: center; |
| 778 | justify-content: space-around; | 776 | justify-content: space-around; |
| 779 | background: #fff0ec; | 777 | background: #fff0ec; |
| 780 | font-size: 16px; | 778 | font-size: 16px; |
| 781 | color: #ff6b4a; | 779 | color: #ff6b4a; |
| 782 | border-radius: 20px 0 0 20px; | 780 | border-radius: 20px 0 0 20px; |
| 783 | } | 781 | } |
| 784 | .botton_now { | 782 | .botton_now { |
| 785 | display: inline-flex; | 783 | display: inline-flex; |
| 786 | align-items: center; | 784 | align-items: center; |
| 787 | justify-content: space-around; | 785 | justify-content: space-around; |
| 788 | background: #ff6b4a; | 786 | background: #ff6b4a; |
| 789 | font-size: 16px; | 787 | font-size: 16px; |
| 790 | color: #ffffff; | 788 | color: #ffffff; |
| 791 | border-radius: 0 20px 20px 0; | 789 | border-radius: 0 20px 20px 0; |
| 792 | } | 790 | } |
| 793 | } | 791 | } |
| 794 | </style> | 792 | </style> |
| 795 | 793 |