Commit e79b72133954f7c2f35ec8d7649740ab111c1c8b
1 parent
34703a7672
Exists in
master
加购更新
Showing
1 changed file
with
3 additions
and
5 deletions
Show diff stats
src/pages/details/details.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="container"> | 2 | <view class="container"> |
| 3 | <!-- 基础信息 --> | 3 | <!-- 基础信息 --> |
| 4 | <view class="basic_info"> | 4 | <view class="basic_info"> |
| 5 | <!-- 轮播图 --> | 5 | <!-- 轮播图 --> |
| 6 | <swiper | 6 | <swiper |
| 7 | class="swiperImage" | 7 | class="swiperImage" |
| 8 | :indicator-dots="true" | 8 | :indicator-dots="true" |
| 9 | :autoplay="true" | 9 | :autoplay="true" |
| 10 | :interval="4000" | 10 | :interval="4000" |
| 11 | :duration="500" | 11 | :duration="500" |
| 12 | > | 12 | > |
| 13 | <swiper-item | 13 | <swiper-item |
| 14 | v-for="(item, index) in carousel" | 14 | v-for="(item, index) in carousel" |
| 15 | :key="index" | 15 | :key="index" |
| 16 | > | 16 | > |
| 17 | <image | 17 | <image |
| 18 | :src="item" | 18 | :src="item" |
| 19 | mode="scaleToFill" | 19 | mode="scaleToFill" |
| 20 | ></image> | 20 | ></image> |
| 21 | </swiper-item> | 21 | </swiper-item> |
| 22 | </swiper> | 22 | </swiper> |
| 23 | <!-- 产品价格及购买人数 --> | 23 | <!-- 产品价格及购买人数 --> |
| 24 | <view class="info_pay"> | 24 | <view class="info_pay"> |
| 25 | <view>￥{{goodsInfo.price || '暂无'}}<span | 25 | <view>￥{{goodsInfo.price || '暂无'}}<span |
| 26 | v-if="goodsInfo.discountPrice" | 26 | v-if="goodsInfo.discountPrice" |
| 27 | class="info_pay_discount" | 27 | class="info_pay_discount" |
| 28 | >¥{{goodsInfo.discountPrice}}</span></view> | 28 | >¥{{goodsInfo.discountPrice}}</span></view> |
| 29 | <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> | 29 | <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span> |
| 30 | </view> | 30 | </view> |
| 31 | <!-- 产品名称 --> | 31 | <!-- 产品名称 --> |
| 32 | <view class="info_name"> | 32 | <view class="info_name"> |
| 33 | <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> | 33 | <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text> |
| 34 | <view | 34 | <view |
| 35 | @tap="confirmShare" | 35 | @tap="confirmShare" |
| 36 | class="info_name_share" | 36 | class="info_name_share" |
| 37 | > | 37 | > |
| 38 | <image src="/static/img/detail/share-icon.png"></image> | 38 | <image src="/static/img/detail/share-icon.png"></image> |
| 39 | <text>分享</text> | 39 | <text>分享</text> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | <!-- 产品售后信息 --> | 42 | <!-- 产品售后信息 --> |
| 43 | <view class="info_after"> | 43 | <view class="info_after"> |
| 44 | <span>支持7天无理由退货</span> | 44 | <span>支持7天无理由退货</span> |
| 45 | <span>顺丰发货</span> | 45 | <span>顺丰发货</span> |
| 46 | <span>30天质量保证</span> | 46 | <span>30天质量保证</span> |
| 47 | </view> | 47 | </view> |
| 48 | </view> | 48 | </view> |
| 49 | <!-- 详细信息 --> | 49 | <!-- 详细信息 --> |
| 50 | <view class="detail_info"> | 50 | <view class="detail_info"> |
| 51 | <!-- 详细信息菜单 --> | 51 | <!-- 详细信息菜单 --> |
| 52 | <view class="screen_bar"> | 52 | <view class="screen_bar"> |
| 53 | <view | 53 | <view |
| 54 | v-for="(item, index) in screenItems" | 54 | v-for="(item, index) in screenItems" |
| 55 | :key="index" | 55 | :key="index" |
| 56 | @click="tabChange(index)" | 56 | @click="tabChange(index)" |
| 57 | > | 57 | > |
| 58 | <view | 58 | <view |
| 59 | class="screen_item" | 59 | class="screen_item" |
| 60 | v-bind:class="{ item_active: item_current === index }" | 60 | v-bind:class="{ item_active: item_current === index }" |
| 61 | >{{ screenItems[index] || '暂无' }}</view> | 61 | >{{ screenItems[index] || '暂无' }}</view> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | <!-- 商品介绍 --> | 64 | <!-- 商品介绍 --> |
| 65 | <view | 65 | <view |
| 66 | class="screen_item" | 66 | class="screen_item" |
| 67 | v-if="item_current === 0" | 67 | v-if="item_current === 0" |
| 68 | > | 68 | > |
| 69 | <Introduce :tag="tag" /> | 69 | <Introduce :tag="tag" /> |
| 70 | </view> | 70 | </view> |
| 71 | <!-- 规格参数 --> | 71 | <!-- 规格参数 --> |
| 72 | <view | 72 | <view |
| 73 | class="screen_item" | 73 | class="screen_item" |
| 74 | v-if="item_current === 1" | 74 | v-if="item_current === 1" |
| 75 | > | 75 | > |
| 76 | <view class="specification"> | 76 | <view class="specification"> |
| 77 | <view | 77 | <view |
| 78 | class="spe_item" | 78 | class="spe_item" |
| 79 | v-for="(item, index) in specification" | 79 | v-for="(item, index) in specification" |
| 80 | :key="index" | 80 | :key="index" |
| 81 | > | 81 | > |
| 82 | <image | 82 | <image |
| 83 | class="spe_image" | 83 | class="spe_image" |
| 84 | v-bind:src="item.img" | 84 | v-bind:src="item.img" |
| 85 | ></image> | 85 | ></image> |
| 86 | <span>{{item.standard || '暂无'}}</span> | 86 | <span>{{item.standard || '暂无'}}</span> |
| 87 | <span>{{item.slength || '暂无'}}</span> | 87 | <span>{{item.slength || '暂无'}}</span> |
| 88 | </view> | 88 | </view> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| 91 | <!-- 售后保障 --> | 91 | <!-- 售后保障 --> |
| 92 | <view | 92 | <view |
| 93 | class="screen_item" | 93 | class="screen_item" |
| 94 | v-if="item_current === 2" | 94 | v-if="item_current === 2" |
| 95 | > | 95 | > |
| 96 | <AfterSails /> | 96 | <AfterSails /> |
| 97 | </view> | 97 | </view> |
| 98 | </view> | 98 | </view> |
| 99 | <!-- 评价 --> | 99 | <!-- 评价 --> |
| 100 | <template v-if="item_current !== 2"> | 100 | <template v-if="item_current !== 2"> |
| 101 | <view class="evaluate"> | 101 | <view class="evaluate"> |
| 102 | <!-- 标题 --> | 102 | <!-- 标题 --> |
| 103 | <view class="evaluate_title"> | 103 | <view class="evaluate_title"> |
| 104 | <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> | 104 | <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view> |
| 105 | <!-- 星星 --> | 105 | <!-- 星星 --> |
| 106 | <view class="evaluate_star"> | 106 | <view class="evaluate_star"> |
| 107 | <view | 107 | <view |
| 108 | class="star" | 108 | class="star" |
| 109 | v-for="(item, index) in evaluate.star" | 109 | v-for="(item, index) in evaluate.star" |
| 110 | :key="index" | 110 | :key="index" |
| 111 | > | 111 | > |
| 112 | <image | 112 | <image |
| 113 | src="../../static/img/detail/d_star.png" | 113 | src="../../static/img/detail/d_star.png" |
| 114 | mode="aspectFill" | 114 | mode="aspectFill" |
| 115 | style="height: 26rpx; width: 28rpx;" | 115 | style="height: 26rpx; width: 28rpx;" |
| 116 | ></image> | 116 | ></image> |
| 117 | </view> | 117 | </view> |
| 118 | </view> | 118 | </view> |
| 119 | </view> | 119 | </view> |
| 120 | <!-- 标签 --> | 120 | <!-- 标签 --> |
| 121 | <view class="evaluate_tag"> | 121 | <view class="evaluate_tag"> |
| 122 | <view | 122 | <view |
| 123 | v-for="(item, index) in evaluate.tag" | 123 | v-for="(item, index) in evaluate.tag" |
| 124 | :key="index" | 124 | :key="index" |
| 125 | >{{item.name}}</view> | 125 | >{{item.name}}</view> |
| 126 | </view> | 126 | </view> |
| 127 | </view> | 127 | </view> |
| 128 | </template> | 128 | </template> |
| 129 | <!-- 商品详情页 --> | 129 | <!-- 商品详情页 --> |
| 130 | <template v-if="current !==2"> | 130 | <template v-if="current !==2"> |
| 131 | <view class="more_info"> | 131 | <view class="more_info"> |
| 132 | <view | 132 | <view |
| 133 | class="more_fixed1" | 133 | class="more_fixed1" |
| 134 | @click="consolg(goodInfo.prodIntro1)" | 134 | @click="consolg(goodInfo.prodIntro1)" |
| 135 | > | 135 | > |
| 136 | <image src="/static/img/detail/hr.png"></image> | 136 | <image src="/static/img/detail/hr.png"></image> |
| 137 | <view>商品详情</view> | 137 | <view>商品详情</view> |
| 138 | <image src="/static/img/detail/hr.png"></image> | 138 | <image src="/static/img/detail/hr.png"></image> |
| 139 | </view> | 139 | </view> |
| 140 | <view | 140 | <view |
| 141 | class="more_all" | 141 | class="more_all" |
| 142 | v-html="more" | 142 | v-html="more" |
| 143 | > | 143 | > |
| 144 | </view> | 144 | </view> |
| 145 | </view> | 145 | </view> |
| 146 | </template> | 146 | </template> |
| 147 | <!-- 底部菜单 --> | 147 | <!-- 底部菜单 --> |
| 148 | <view class="menu"> | 148 | <view class="menu"> |
| 149 | <view | 149 | <view |
| 150 | @tap="toCart()" | 150 | @tap="toCart()" |
| 151 | class="menu_1" | 151 | class="menu_1" |
| 152 | > | 152 | > |
| 153 | <view class="cart_icon"> | 153 | <view class="cart_icon"> |
| 154 | <image src="/static/tab-cart.png" /> | 154 | <image src="/static/tab-cart.png" /> |
| 155 | <text>{{cartNumber}}</text> | 155 | <text>{{cartNumber}}</text> |
| 156 | </view> | 156 | </view> |
| 157 | <view class="menu_image">购物车</view> | 157 | <view class="menu_image">购物车</view> |
| 158 | </view> | 158 | </view> |
| 159 | <view class="menu_2"> | 159 | <view class="menu_2"> |
| 160 | <view | 160 | <view |
| 161 | class="menu_input" | 161 | class="menu_input" |
| 162 | @tap="showBottom(1)" | 162 | @tap="showBottom(1)" |
| 163 | >加入购物车</view> | 163 | >加入购物车</view> |
| 164 | <view | 164 | <view |
| 165 | class="menu_now" | 165 | class="menu_now" |
| 166 | @click="showBottom(2)" | 166 | @click="showBottom(2)" |
| 167 | >立即购买</view> | 167 | >立即购买</view> |
| 168 | </view> | 168 | </view> |
| 169 | </view> | 169 | </view> |
| 170 | <!-- 参数选择 --> | 170 | <!-- 参数选择 --> |
| 171 | <template v-if="isShowBottom"> | 171 | <template v-if="isShowBottom"> |
| 172 | <BottomSheet | 172 | <BottomSheet |
| 173 | :isCart="isCart" | 173 | :isCart="isCart" |
| 174 | @addCart="addCart" | 174 | @addCart="addCart" |
| 175 | :pid="pid" | 175 | :pid="pid" |
| 176 | :goodInfo="goodInfo" | 176 | :goodInfo="goodInfo" |
| 177 | :isShowBottom="isShowBottom" | 177 | :isShowBottom="isShowBottom" |
| 178 | @closeBottom="closeBottom" | 178 | @closeBottom="closeBottom" |
| 179 | ></BottomSheet> | 179 | ></BottomSheet> |
| 180 | </template> | 180 | </template> |
| 181 | <!-- 分享 --> | 181 | <!-- 分享 --> |
| 182 | <template> | 182 | <template> |
| 183 | <uni-popup | 183 | <uni-popup |
| 184 | ref="popupShare" | 184 | ref="popupShare" |
| 185 | type="share" | 185 | type="share" |
| 186 | > | 186 | > |
| 187 | <uni-popup-share @select="selectShare"></uni-popup-share> | 187 | <uni-popup-share @select="selectShare"></uni-popup-share> |
| 188 | </uni-popup> | 188 | </uni-popup> |
| 189 | </template> | 189 | </template> |
| 190 | <!-- 分享海报 --> | 190 | <!-- 分享海报 --> |
| 191 | <template> | 191 | <template> |
| 192 | <uni-popup | 192 | <uni-popup |
| 193 | ref="uniPopupPost" | 193 | ref="uniPopupPost" |
| 194 | type="center" | 194 | type="center" |
| 195 | > | 195 | > |
| 196 | <uni-popup-post :postUrl="postUrl"></uni-popup-post> | 196 | <uni-popup-post :postUrl="postUrl"></uni-popup-post> |
| 197 | </uni-popup> | 197 | </uni-popup> |
| 198 | </template> | 198 | </template> |
| 199 | </view> | 199 | </view> |
| 200 | </template> | 200 | </template> |
| 201 | 201 | ||
| 202 | <script> | 202 | <script> |
| 203 | import store from '@/store' | 203 | import store from '@/store' |
| 204 | import Introduce from './components/Introduce' // 商品介绍基本信息组件 | 204 | import Introduce from './components/Introduce' // 商品介绍基本信息组件 |
| 205 | import AfterSails from './components/AfterSails' // 售后保障组件 | 205 | import AfterSails from './components/AfterSails' // 售后保障组件 |
| 206 | import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 | 206 | import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件 |
| 207 | import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 | 207 | import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件 |
| 208 | import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 | 208 | import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件 |
| 209 | 209 | ||
| 210 | export default { | 210 | export default { |
| 211 | components: { | 211 | components: { |
| 212 | Introduce, | 212 | Introduce, |
| 213 | AfterSails, | 213 | AfterSails, |
| 214 | BottomSheet, | 214 | BottomSheet, |
| 215 | uniPopupShare, | 215 | uniPopupShare, |
| 216 | uniPopupPost, | 216 | uniPopupPost, |
| 217 | }, | 217 | }, |
| 218 | data () { | 218 | data () { |
| 219 | return { | 219 | return { |
| 220 | pid: 7, // 产品ID | 220 | pid: 7, // 产品ID |
| 221 | skId: undefined, // skuId | 221 | skId: undefined, // skuId |
| 222 | // 详细信息菜单 | 222 | // 详细信息菜单 |
| 223 | item_current: 0, | 223 | item_current: 0, |
| 224 | screenItems: [ | 224 | screenItems: [ |
| 225 | '商品介绍', | 225 | '商品介绍', |
| 226 | '规格参数', | 226 | '规格参数', |
| 227 | '售后保障', | 227 | '售后保障', |
| 228 | ], | 228 | ], |
| 229 | showPostImg: false, // 是否展示分享海报 | 229 | showPostImg: false, // 是否展示分享海报 |
| 230 | isShowBottom: false, // 是否展示参数选择 | 230 | isShowBottom: false, // 是否展示参数选择 |
| 231 | isCart: 1, // 参数选择 按钮判断 | 231 | isCart: 1, // 参数选择 按钮判断 |
| 232 | } | 232 | } |
| 233 | }, | 233 | }, |
| 234 | onLoad({ pid = this.pid, sk_id: skId }) { | 234 | onLoad({ pid = this.pid, sk_id: skId }) { |
| 235 | // 根据页面传参请求页面数据 | 235 | // 根据页面传参请求页面数据 |
| 236 | this.pid = pid | 236 | this.pid = pid |
| 237 | this.skId = skId | 237 | this.skId = skId |
| 238 | 238 | ||
| 239 | // 获取产品详情 | 239 | // 获取产品详情 |
| 240 | this.getDetails({ pid, skId }) | 240 | this.getDetails({ pid, skId }) |
| 241 | // 获取购物车数据 | 241 | // 获取购物车数据 |
| 242 | this.getCartNum() | 242 | this.getCartNum() |
| 243 | }, | 243 | }, |
| 244 | computed: { | 244 | computed: { |
| 245 | // 获取轮播图数据 | 245 | // 获取轮播图数据 |
| 246 | goodInfo() { | 246 | goodInfo() { |
| 247 | return this.$store.state.details.goodInfo | 247 | return this.$store.state.details.goodInfo |
| 248 | }, | 248 | }, |
| 249 | // 获取轮播图数据 | 249 | // 获取轮播图数据 |
| 250 | carousel() { | 250 | carousel() { |
| 251 | return this.$store.state.details.carousel | 251 | return this.$store.state.details.carousel |
| 252 | }, | 252 | }, |
| 253 | // 商品基本信息 | 253 | // 商品基本信息 |
| 254 | goodsInfo() { | 254 | goodsInfo() { |
| 255 | return this.$store.state.details.goodsInfo | 255 | return this.$store.state.details.goodsInfo |
| 256 | }, | 256 | }, |
| 257 | // 商品介绍商品标签 | 257 | // 商品介绍商品标签 |
| 258 | tag() { | 258 | tag() { |
| 259 | return this.$store.state.details.tag | 259 | return this.$store.state.details.tag |
| 260 | }, | 260 | }, |
| 261 | // 规格参数 | 261 | // 规格参数 |
| 262 | specification() { | 262 | specification() { |
| 263 | return this.$store.state.details.specification | 263 | return this.$store.state.details.specification |
| 264 | }, | 264 | }, |
| 265 | // 评价 | 265 | // 评价 |
| 266 | evaluate() { | 266 | evaluate() { |
| 267 | return this.$store.state.details.evaluate | 267 | return this.$store.state.details.evaluate |
| 268 | }, | 268 | }, |
| 269 | // 商品详情 | 269 | // 商品详情 |
| 270 | more() { | 270 | more() { |
| 271 | return this.$store.state.details.more | 271 | return this.$store.state.details.more |
| 272 | }, | 272 | }, |
| 273 | // 购物车数目 | 273 | // 购物车数目 |
| 274 | cartNumber() { | 274 | cartNumber() { |
| 275 | return this.$store.state.details.cartNumber | 275 | return this.$store.state.details.cartNumber |
| 276 | }, | 276 | }, |
| 277 | // 购物车数目 | 277 | // 购物车数目 |
| 278 | skuList() { | 278 | skuList() { |
| 279 | return this.$store.state.details.skuList | 279 | return this.$store.state.details.skuList |
| 280 | }, | 280 | }, |
| 281 | // 分享海报 | 281 | // 分享海报 |
| 282 | postUrl() { | 282 | postUrl() { |
| 283 | return this.$store.state.details.postUrl | 283 | return this.$store.state.details.postUrl |
| 284 | }, | 284 | }, |
| 285 | }, | 285 | }, |
| 286 | methods: { | 286 | methods: { |
| 287 | // 获取产品详情 | 287 | // 获取产品详情 |
| 288 | getDetails({ pid, skId }) { | 288 | getDetails({ pid, skId }) { |
| 289 | store.dispatch('details/details', { | 289 | store.dispatch('details/details', { |
| 290 | pid, | 290 | pid, |
| 291 | sk_id: skId, | 291 | sk_id: skId, |
| 292 | }) | 292 | }) |
| 293 | store.dispatch('read/fetch', { | 293 | store.dispatch('read/fetch', { |
| 294 | pid, | 294 | pid, |
| 295 | sk_id: skId, | 295 | sk_id: skId, |
| 296 | }) | 296 | }) |
| 297 | }, | 297 | }, |
| 298 | // 获取购物车数目 | 298 | // 获取购物车数目 |
| 299 | getCartNum() { | 299 | getCartNum() { |
| 300 | store.dispatch('details/getCartNumber') | 300 | store.dispatch('details/getCartNumber') |
| 301 | }, | 301 | }, |
| 302 | // 切换详细信息菜单 | 302 | // 切换详细信息菜单 |
| 303 | tabChange (e) { | 303 | tabChange (e) { |
| 304 | if (this.current !== e) { | 304 | if (this.current !== e) { |
| 305 | this.item_current = e | 305 | this.item_current = e |
| 306 | } | 306 | } |
| 307 | }, | 307 | }, |
| 308 | // 打开分享界面 | 308 | // 打开分享界面 |
| 309 | confirmShare() { | 309 | confirmShare() { |
| 310 | this.$refs.popupShare.open() | 310 | this.$refs.popupShare.open() |
| 311 | }, | 311 | }, |
| 312 | // 选择分享 | 312 | // 选择分享 |
| 313 | selectShare(e, done) { | 313 | selectShare(e, done) { |
| 314 | switch (e.item.name) { | 314 | switch (e.item.name) { |
| 315 | // 分享到好物圈 | 315 | // 分享到好物圈 |
| 316 | case 'recommend': | 316 | case 'recommend': |
| 317 | this.shareRecommend() | 317 | this.shareRecommend() |
| 318 | break | 318 | break |
| 319 | // 分享到朋友圈 | 319 | // 分享到朋友圈 |
| 320 | case 'friend': | 320 | case 'friend': |
| 321 | break | 321 | break |
| 322 | // 生成海报 | 322 | // 生成海报 |
| 323 | case 'poster': | 323 | case 'poster': |
| 324 | uni.showLoading({ | 324 | uni.showLoading({ |
| 325 | title: '生成图片中', | 325 | title: '生成图片中', |
| 326 | }) | 326 | }) |
| 327 | this.sharePost() | 327 | this.sharePost() |
| 328 | break | 328 | break |
| 329 | default: | 329 | default: |
| 330 | break | 330 | break |
| 331 | } | 331 | } |
| 332 | done() | 332 | done() |
| 333 | }, | 333 | }, |
| 334 | // 分享到好物圈 | 334 | // 分享到好物圈 |
| 335 | shareRecommend() { | 335 | shareRecommend() { |
| 336 | if (wx.openBusinessView) { | 336 | if (wx.openBusinessView) { |
| 337 | wx.openBusinessView({ | 337 | wx.openBusinessView({ |
| 338 | businessType: 'friendGoodsRecommend', | 338 | businessType: 'friendGoodsRecommend', |
| 339 | extraData: { | 339 | extraData: { |
| 340 | product: { | 340 | product: { |
| 341 | item_code: '58_68', | 341 | item_code: '58_68', |
| 342 | title: this.goodsInfo.name, | 342 | title: this.goodsInfo.name, |
| 343 | image_list: this.carousel, | 343 | image_list: this.carousel, |
| 344 | }, | 344 | }, |
| 345 | }, | 345 | }, |
| 346 | success: function (res) { | 346 | success: function (res) { |
| 347 | uni.showToast({ | 347 | uni.showToast({ |
| 348 | title: '好物圈分享成功！', | 348 | title: '好物圈分享成功！', |
| 349 | icon: 'none', | 349 | icon: 'none', |
| 350 | duration: 2000, | 350 | duration: 2000, |
| 351 | }) | 351 | }) |
| 352 | // 向服务器报告这个事情 | 352 | // 向服务器报告这个事情 |
| 353 | // TODO:::记录这个用户的推广过程。 | 353 | // TODO:::记录这个用户的推广过程。 |
| 354 | console.log('好物圈分享成功！', res) | 354 | console.log('好物圈分享成功！', res) |
| 355 | }, | 355 | }, |
| 356 | fail: function (res) { | 356 | fail: function (res) { |
| 357 | console.log('好物圈分享失败！', res) | 357 | console.log('好物圈分享失败！', res) |
| 358 | }, | 358 | }, |
| 359 | }) | 359 | }) |
| 360 | } | 360 | } |
| 361 | }, | 361 | }, |
| 362 | // 分享到朋友/圈 | 362 | // 分享到朋友/圈 |
| 363 | shareFriend() { | 363 | shareFriend() { |
| 364 | this.onShareAppMessage() | 364 | this.onShareAppMessage() |
| 365 | }, | 365 | }, |
| 366 | // 朋友圈设置页面 | 366 | // 朋友圈设置页面 |
| 367 | onShareAppMessage() { | 367 | onShareAppMessage() { |
| 368 | let myName = this.$store.state.user.userInfo.nickName | 368 | let myName = this.$store.state.user.userInfo.nickName |
| 369 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { | 369 | if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { |
| 370 | myName = '【神秘人】' | 370 | myName = '【神秘人】' |
| 371 | } else { | 371 | } else { |
| 372 | myName = '【' + myName + '】' | 372 | myName = '【' + myName + '】' |
| 373 | } | 373 | } |
| 374 | const uid = uni.getStorageSync('uid') | 374 | const uid = uni.getStorageSync('uid') |
| 375 | return { | 375 | return { |
| 376 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) | 376 | title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等) |
| 377 | path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, | 377 | path: '/pages/index/detail/index?uid=' + uid + '&sid=0&pid=' + this.pid, |
| 378 | imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 | 378 | imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 |
| 379 | success: function (res) { | 379 | success: function (res) { |
| 380 | if (res.errMsg === 'shareAppMessage:ok') { | 380 | if (res.errMsg === 'shareAppMessage:ok') { |
| 381 | console.log('分享成功！', res) | 381 | console.log('分享成功！', res) |
| 382 | } | 382 | } |
| 383 | }, | 383 | }, |
| 384 | fail: function (res) { | 384 | fail: function (res) { |
| 385 | if (res.errMsg === 'shareAppMessage:fail cancel') { | 385 | if (res.errMsg === 'shareAppMessage:fail cancel') { |
| 386 | console.log('fail', '放弃分享') | 386 | console.log('fail', '放弃分享') |
| 387 | } else if (res.errMsg === 'shareAppMessage:fail') { | 387 | } else if (res.errMsg === 'shareAppMessage:fail') { |
| 388 | console.log('fail', '分享失败') | 388 | console.log('fail', '分享失败') |
| 389 | } | 389 | } |
| 390 | }, | 390 | }, |
| 391 | } | 391 | } |
| 392 | }, | 392 | }, |
| 393 | // 生成海报 | 393 | // 生成海报 |
| 394 | sharePost() { | 394 | sharePost() { |
| 395 | const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' | 395 | const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined' |
| 396 | 396 | ||
| 397 | store.dispatch('details/post', { | 397 | store.dispatch('details/post', { |
| 398 | pid: this.pid, | 398 | pid: this.pid, |
| 399 | sid: fromsid === 'undefined' ? 0 : fromsid, | 399 | sid: fromsid === 'undefined' ? 0 : fromsid, |
| 400 | }).then((data) => { | 400 | }).then((data) => { |
| 401 | uni.hideLoading() | 401 | uni.hideLoading() |
| 402 | this.$refs.uniPopupPost.open() | 402 | this.$refs.uniPopupPost.open() |
| 403 | }) | 403 | }) |
| 404 | }, | 404 | }, |
| 405 | // 参数选择弹窗开关 | 405 | // 参数选择弹窗开关 |
| 406 | showBottom(isCart) { | 406 | showBottom(isCart) { |
| 407 | this.isCart = isCart | 407 | this.isCart = isCart |
| 408 | this.isShowBottom = true | 408 | this.isShowBottom = true |
| 409 | }, | 409 | }, |
| 410 | closeBottom() { | 410 | closeBottom() { |
| 411 | this.isShowBottom = false | 411 | this.isShowBottom = false |
| 412 | }, | 412 | }, |
| 413 | // 前往购物车 | 413 | // 前往购物车 |
| 414 | toCart() { | 414 | toCart() { |
| 415 | uni.switchTab({ | 415 | uni.switchTab({ |
| 416 | url: '/pages/cart/cart', | 416 | url: '/pages/cart/cart', |
| 417 | success: res => {}, | 417 | success: res => {}, |
| 418 | fail: (error) => { console.log('跳转购物车失败======>', error) }, | 418 | fail: (error) => { console.log('跳转购物车失败======>', error) }, |
| 419 | complete: () => { console.log('toCart') }, | 419 | complete: () => { console.log('toCart') }, |
| 420 | }) | 420 | }) |
| 421 | }, | 421 | }, |
| 422 | // 加入购物车 | 422 | // 加入购物车 |
| 423 | addCart (mpId, num, checkedSKU, skId,price) { | 423 | addCart (mpId, num, checkedSKU, skId, price) { |
| 424 | const addCartList = {} | 424 | const addCartList = {} |
| 425 | addCartList.mp_id = mpId | 425 | addCartList.mp_id = mpId |
| 426 | addCartList.sk_id = skId | 426 | addCartList.sk_id = skId |
| 427 | addCartList.num = num | 427 | addCartList.num = num |
| 428 | addCartList.checkedSKU = checkedSKU | 428 | addCartList.checkedSKU = checkedSKU |
| 429 | addCartList.pid = this.pid | 429 | addCartList.pid = this.pid |
| 430 | addCartList.price = price | 430 | addCartList.price = price |
| 431 | console.log('添加购物车的参数', addCartList) | 431 | console.log('添加购物车的参数', addCartList) |
| 432 | store.dispatch('cart/addCart', addCartList).then((res) => { | 432 | store.dispatch('cart/addCart', addCartList).then((res) => { |
| 433 | if (res.code === 1) { | 433 | if (res.code === 1) { |
| 434 | uni.showToast({ | 434 | uni.showToast({ |
| 435 | title: '添加成功~', | 435 | title: '添加成功~', |
| 436 | icon: 'success', | 436 | icon: 'success', |
| 437 | }) | 437 | }) |
| 438 | } | 438 | } |
| 439 | // 再次请求购物车接口，实现实时更新 | 439 | // 再次请求购物车接口，实现实时更新 |
| 440 | store.dispatch('cart/getCartList', { | 440 | store.dispatch('details/getCartNumber') |
| 441 | uid: this.$store.state.user.userInfo.uid, | ||
| 442 | }) | ||
| 443 | }) | 441 | }) |
| 444 | }, | 442 | }, |
| 445 | }, | 443 | }, |
| 446 | } | 444 | } |
| 447 | </script> | 445 | </script> |
| 448 | 446 | ||
| 449 | <style lang="scss"> | 447 | <style lang="scss"> |
| 450 | .container { | 448 | .container { |
| 451 | background-color: #f8f8f8; | 449 | background-color: #f8f8f8; |
| 452 | font-family: "PingFangSC-Regular"; | 450 | font-family: "PingFangSC-Regular"; |
| 453 | // 板块样式 | 451 | // 板块样式 |
| 454 | > view { | 452 | > view { |
| 455 | background: #ffffff; | 453 | background: #ffffff; |
| 456 | margin-bottom: 10px; | 454 | margin-bottom: 10px; |
| 457 | padding: 8px 20px 8px 20px; | 455 | padding: 8px 20px 8px 20px; |
| 458 | box-sizing: border-box; | 456 | box-sizing: border-box; |
| 459 | } | 457 | } |
| 460 | // 基础信息板块 | 458 | // 基础信息板块 |
| 461 | .basic_info { | 459 | .basic_info { |
| 462 | // 轮播图 | 460 | // 轮播图 |
| 463 | .swiperImage { | 461 | .swiperImage { |
| 464 | width: 684rpx; | 462 | width: 684rpx; |
| 465 | height: 480rpx; | 463 | height: 480rpx; |
| 466 | image { | 464 | image { |
| 467 | max-width: 100%; | 465 | max-width: 100%; |
| 468 | max-height: 100%; | 466 | max-height: 100%; |
| 469 | border-radius: 16rpx; | 467 | border-radius: 16rpx; |
| 470 | } | 468 | } |
| 471 | } | 469 | } |
| 472 | // 产品价格及购买人数 | 470 | // 产品价格及购买人数 |
| 473 | .info_pay { | 471 | .info_pay { |
| 474 | color: #eb5d3b; | 472 | color: #eb5d3b; |
| 475 | font-size: 18px; | 473 | font-size: 18px; |
| 476 | margin-top: 5px; | 474 | margin-top: 5px; |
| 477 | font-family: "PingFangSC-Semibold"; | 475 | font-family: "PingFangSC-Semibold"; |
| 478 | display: flex; | 476 | display: flex; |
| 479 | justify-content: space-between; | 477 | justify-content: space-between; |
| 480 | .info_pay_discount { | 478 | .info_pay_discount { |
| 481 | text-decoration: line-through; | 479 | text-decoration: line-through; |
| 482 | margin-left: 8rpx; | 480 | margin-left: 8rpx; |
| 483 | color: #999; | 481 | color: #999; |
| 484 | font-size: 14px; | 482 | font-size: 14px; |
| 485 | } | 483 | } |
| 486 | .info_pay_number { | 484 | .info_pay_number { |
| 487 | color: #999; | 485 | color: #999; |
| 488 | font-size: 14px; | 486 | font-size: 14px; |
| 489 | font-family: PingFangSC-Regular; | 487 | font-family: PingFangSC-Regular; |
| 490 | } | 488 | } |
| 491 | } | 489 | } |
| 492 | // 产品名称 | 490 | // 产品名称 |
| 493 | .info_name { | 491 | .info_name { |
| 494 | margin-top: 5px; | 492 | margin-top: 5px; |
| 495 | display: flex; | 493 | display: flex; |
| 496 | justify-content: space-between; | 494 | justify-content: space-between; |
| 497 | .info_name_name { | 495 | .info_name_name { |
| 498 | margin-right: 10px; | 496 | margin-right: 10px; |
| 499 | font-size: 16px; | 497 | font-size: 16px; |
| 500 | font-family: "PingFangSC-Semibold"; | 498 | font-family: "PingFangSC-Semibold"; |
| 501 | max-width: 592rpx; | 499 | max-width: 592rpx; |
| 502 | } | 500 | } |
| 503 | .info_name_share { | 501 | .info_name_share { |
| 504 | display: flex; | 502 | display: flex; |
| 505 | flex-direction: column; | 503 | flex-direction: column; |
| 506 | justify-content: space-between; | 504 | justify-content: space-between; |
| 507 | align-items: center; | 505 | align-items: center; |
| 508 | margin-top: 14rpx; | 506 | margin-top: 14rpx; |
| 509 | > image { | 507 | > image { |
| 510 | height: 40rpx; | 508 | height: 40rpx; |
| 511 | width: 40rpx; | 509 | width: 40rpx; |
| 512 | } | 510 | } |
| 513 | > text { | 511 | > text { |
| 514 | font-family: PingFangSC-Regular; | 512 | font-family: PingFangSC-Regular; |
| 515 | font-size: 12px; | 513 | font-size: 12px; |
| 516 | color: #999; | 514 | color: #999; |
| 517 | letter-spacing: -0.23px; | 515 | letter-spacing: -0.23px; |
| 518 | } | 516 | } |
| 519 | } | 517 | } |
| 520 | } | 518 | } |
| 521 | // 售后服务 | 519 | // 售后服务 |
| 522 | .info_after { | 520 | .info_after { |
| 523 | font-size: 10px; | 521 | font-size: 10px; |
| 524 | color: #999; | 522 | color: #999; |
| 525 | margin-top: 20rpx; | 523 | margin-top: 20rpx; |
| 526 | > span { | 524 | > span { |
| 527 | height: 14px; | 525 | height: 14px; |
| 528 | margin-right: 10px; | 526 | margin-right: 10px; |
| 529 | } | 527 | } |
| 530 | } | 528 | } |
| 531 | } | 529 | } |
| 532 | // 详细信息 | 530 | // 详细信息 |
| 533 | .detail_info { | 531 | .detail_info { |
| 534 | margin-bottom: 20rpx; | 532 | margin-bottom: 20rpx; |
| 535 | .screen_bar { | 533 | .screen_bar { |
| 536 | width: 670rpx; | 534 | width: 670rpx; |
| 537 | margin-top: 20rpx; | 535 | margin-top: 20rpx; |
| 538 | margin-bottom: 24rpx; | 536 | margin-bottom: 24rpx; |
| 539 | display: flex; | 537 | display: flex; |
| 540 | flex-direction: row; | 538 | flex-direction: row; |
| 541 | justify-content: space-between; | 539 | justify-content: space-between; |
| 542 | align-items: center; | 540 | align-items: center; |
| 543 | font-size: 14px; | 541 | font-size: 14px; |
| 544 | color: #333333; | 542 | color: #333333; |
| 545 | transition: all 0.2s; | 543 | transition: all 0.2s; |
| 546 | } | 544 | } |
| 547 | .item_active { | 545 | .item_active { |
| 548 | border-bottom: 4rpx solid #ff6b4a; | 546 | border-bottom: 4rpx solid #ff6b4a; |
| 549 | } | 547 | } |
| 550 | .screen_item { | 548 | .screen_item { |
| 551 | font-size: 32rpx; | 549 | font-size: 32rpx; |
| 552 | color: #333333; | 550 | color: #333333; |
| 553 | display: flex; | 551 | display: flex; |
| 554 | transition: all 0.2s; | 552 | transition: all 0.2s; |
| 555 | // 规格参数 | 553 | // 规格参数 |
| 556 | .specification { | 554 | .specification { |
| 557 | margin-bottom: 4px; | 555 | margin-bottom: 4px; |
| 558 | .spe_item { | 556 | .spe_item { |
| 559 | image { | 557 | image { |
| 560 | width: 50px; | 558 | width: 50px; |
| 561 | height: 25px; | 559 | height: 25px; |
| 562 | margin-right: 6px; | 560 | margin-right: 6px; |
| 563 | vertical-align: middle; | 561 | vertical-align: middle; |
| 564 | } | 562 | } |
| 565 | span { | 563 | span { |
| 566 | margin-left: 24rpx; | 564 | margin-left: 24rpx; |
| 567 | } | 565 | } |
| 568 | } | 566 | } |
| 569 | } | 567 | } |
| 570 | } | 568 | } |
| 571 | // | 569 | // |
| 572 | } | 570 | } |
| 573 | // 宝贝好评率 | 571 | // 宝贝好评率 |
| 574 | .evaluate { | 572 | .evaluate { |
| 575 | .evaluate_title { | 573 | .evaluate_title { |
| 576 | font-size: 14px; | 574 | font-size: 14px; |
| 577 | color: #333333; | 575 | color: #333333; |
| 578 | display: flex; | 576 | display: flex; |
| 579 | justify-content: space-between; | 577 | justify-content: space-between; |
| 580 | .title_rate { | 578 | .title_rate { |
| 581 | margin-left: 10rpx; | 579 | margin-left: 10rpx; |
| 582 | } | 580 | } |
| 583 | .evaluate_star { | 581 | .evaluate_star { |
| 584 | width: 90px; | 582 | width: 90px; |
| 585 | display: flex; | 583 | display: flex; |
| 586 | align-items: center; | 584 | align-items: center; |
| 587 | justify-content: space-between; | 585 | justify-content: space-between; |
| 588 | } | 586 | } |
| 589 | view { | 587 | view { |
| 590 | font-size: 14px; | 588 | font-size: 14px; |
| 591 | color: #333333; | 589 | color: #333333; |
| 592 | font-weight: bold; | 590 | font-weight: bold; |
| 593 | } | 591 | } |
| 594 | } | 592 | } |
| 595 | .evaluate_tag { | 593 | .evaluate_tag { |
| 596 | view { | 594 | view { |
| 597 | display: inline-block; | 595 | display: inline-block; |
| 598 | margin-right: 20rpx; | 596 | margin-right: 20rpx; |
| 599 | min-width: 180rpx; | 597 | min-width: 180rpx; |
| 600 | margin-top: 10px; | 598 | margin-top: 10px; |
| 601 | height: 48rpx; | 599 | height: 48rpx; |
| 602 | background: #f2f2f2; | 600 | background: #f2f2f2; |
| 603 | border-radius: 2px; | 601 | border-radius: 2px; |
| 604 | font-family: PingFangSC-Regular; | 602 | font-family: PingFangSC-Regular; |
| 605 | font-size: 12px; | 603 | font-size: 12px; |
| 606 | color: #666666; | 604 | color: #666666; |
| 607 | letter-spacing: -0.23px; | 605 | letter-spacing: -0.23px; |
| 608 | text-align: center; | 606 | text-align: center; |
| 609 | padding: 0 48rpx; | 607 | padding: 0 48rpx; |
| 610 | line-height: 48rpx; | 608 | line-height: 48rpx; |
| 611 | } | 609 | } |
| 612 | } | 610 | } |
| 613 | } | 611 | } |
| 614 | // 商品详情 | 612 | // 商品详情 |
| 615 | .more_info { | 613 | .more_info { |
| 616 | .more_fixed1 { | 614 | .more_fixed1 { |
| 617 | display: flex; | 615 | display: flex; |
| 618 | justify-content: space-between; | 616 | justify-content: space-between; |
| 619 | align-content: center; | 617 | align-content: center; |
| 620 | margin-bottom: 12px; | 618 | margin-bottom: 12px; |
| 621 | view { | 619 | view { |
| 622 | font-size: 14px; | 620 | font-size: 14px; |
| 623 | color: #333333; | 621 | color: #333333; |
| 624 | font-weight: bold; | 622 | font-weight: bold; |
| 625 | font-family: "PingFangSC-Medium"; | 623 | font-family: "PingFangSC-Medium"; |
| 626 | line-height: 24px; | 624 | line-height: 24px; |
| 627 | } | 625 | } |
| 628 | image { | 626 | image { |
| 629 | width: 240rpx; | 627 | width: 240rpx; |
| 630 | height: 3px; | 628 | height: 3px; |
| 631 | margin-top: 10px; | 629 | margin-top: 10px; |
| 632 | } | 630 | } |
| 633 | } | 631 | } |
| 634 | .more_all { | 632 | .more_all { |
| 635 | width: 100%; | 633 | width: 100%; |
| 636 | margin-top: 30rpx; | 634 | margin-top: 30rpx; |
| 637 | margin-right: 30rpx; | 635 | margin-right: 30rpx; |
| 638 | margin-bottom: 180rpx; | 636 | margin-bottom: 180rpx; |
| 639 | font-family: "PingFangSC-Regular"; | 637 | font-family: "PingFangSC-Regular"; |
| 640 | } | 638 | } |
| 641 | } | 639 | } |
| 642 | // 菜单 | 640 | // 菜单 |
| 643 | .menu { | 641 | .menu { |
| 644 | position: fixed; | 642 | position: fixed; |
| 645 | bottom: 0; | 643 | bottom: 0; |
| 646 | height: 74px; | 644 | height: 74px; |
| 647 | width: 100%; | 645 | width: 100%; |
| 648 | background: #ffffff; | 646 | background: #ffffff; |
| 649 | padding: 20px 20px 8px 20px; | 647 | padding: 20px 20px 8px 20px; |
| 650 | font-family: "PingFangSC-Regular"; | 648 | font-family: "PingFangSC-Regular"; |
| 651 | box-sizing: border-box; | 649 | box-sizing: border-box; |
| 652 | display: flex; | 650 | display: flex; |
| 653 | justify-content: space-between; | 651 | justify-content: space-between; |
| 654 | align-content: center; | 652 | align-content: center; |
| 655 | margin: 0; | 653 | margin: 0; |
| 656 | /* iphonex 等安全区设置，底部安全区适配 */ | 654 | /* iphonex 等安全区设置，底部安全区适配 */ |
| 657 | /* #ifndef APP-NVUE */ | 655 | /* #ifndef APP-NVUE */ |
| 658 | padding-bottom: constant(safe-area-inset-bottom); | 656 | padding-bottom: constant(safe-area-inset-bottom); |
| 659 | padding-bottom: env(safe-area-inset-bottom); | 657 | padding-bottom: env(safe-area-inset-bottom); |
| 660 | .menu_1 { | 658 | .menu_1 { |
| 661 | width: 20%; | 659 | width: 20%; |
| 662 | height: 100%; | 660 | height: 100%; |
| 663 | text-align: center; | 661 | text-align: center; |
| 664 | color: #989898; | 662 | color: #989898; |
| 665 | .cart_icon { | 663 | .cart_icon { |
| 666 | position: relative; | 664 | position: relative; |
| 667 | text { | 665 | text { |
| 668 | position: absolute; | 666 | position: absolute; |
| 669 | color: white; | 667 | color: white; |
| 670 | font-size: 17px; | 668 | font-size: 17px; |
| 671 | background-color: red; | 669 | background-color: red; |
| 672 | min-height: 24px; | 670 | min-height: 24px; |
| 673 | min-width: 24px; | 671 | min-width: 24px; |
| 674 | line-height: 24px; | 672 | line-height: 24px; |
| 675 | right: -12%; | 673 | right: -12%; |
| 676 | top: -12px; | 674 | top: -12px; |
| 677 | text-align: center; | 675 | text-align: center; |
| 678 | border-radius: 24px; | 676 | border-radius: 24px; |
| 679 | padding: 2px; | 677 | padding: 2px; |
| 680 | } | 678 | } |
| 681 | } | 679 | } |
| 682 | } | 680 | } |
| 683 | image { | 681 | image { |
| 684 | width: 42%; | 682 | width: 42%; |
| 685 | height: 26px; | 683 | height: 26px; |
| 686 | } | 684 | } |
| 687 | .menu_image { | 685 | .menu_image { |
| 688 | font-size: 12px; | 686 | font-size: 12px; |
| 689 | text-align: center; | 687 | text-align: center; |
| 690 | } | 688 | } |
| 691 | .menu_2 { | 689 | .menu_2 { |
| 692 | width: 74%; | 690 | width: 74%; |
| 693 | height: 86%; | 691 | height: 86%; |
| 694 | display: grid; | 692 | display: grid; |
| 695 | grid-template-columns: 50% 50%; | 693 | grid-template-columns: 50% 50%; |
| 696 | } | 694 | } |
| 697 | .menu_input { | 695 | .menu_input { |
| 698 | display: inline-flex; | 696 | display: inline-flex; |
| 699 | align-items: center; | 697 | align-items: center; |
| 700 | justify-content: space-around; | 698 | justify-content: space-around; |
| 701 | background: #fff0ec; | 699 | background: #fff0ec; |
| 702 | font-size: 16px; | 700 | font-size: 16px; |
| 703 | color: #ff6b4a; | 701 | color: #ff6b4a; |
| 704 | border-radius: 20px 0 0 20px; | 702 | border-radius: 20px 0 0 20px; |
| 705 | } | 703 | } |
| 706 | .menu_now { | 704 | .menu_now { |
| 707 | display: inline-flex; | 705 | display: inline-flex; |
| 708 | align-items: center; | 706 | align-items: center; |
| 709 | justify-content: space-around; | 707 | justify-content: space-around; |
| 710 | background: #ff6b4a; | 708 | background: #ff6b4a; |
| 711 | font-size: 16px; | 709 | font-size: 16px; |
| 712 | color: #ffffff; | 710 | color: #ffffff; |
| 713 | border-radius: 0 20px 20px 0; | 711 | border-radius: 0 20px 20px 0; |
| 714 | } | 712 | } |
| 715 | } | 713 | } |
| 716 | } | 714 | } |
| 717 | </style> | 715 | </style> |
| 718 | 716 |