goodsDetail.vue 13.1 KB
Newer Older
1
<template>
zhangcheng committed
2
	<view class="spec-content">
3 4 5
		<view class="topBar" :style="{'top':topBarTop+'px','height':topBarHeight+'px'}">
			<u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon>
		</view>
张成 committed
6 7
		<view v-if="goodInfo">
			<view class="uni-margin-wrap">
张成 committed
8 9 10 11 12 13
				<swiper v-if="goodInfo.pics.introImagesApplet" class="swiper">
					<swiper-item v-for="item in goodInfo.pics.introImagesApplet" :key="item">
						<image :src="item" class="swiper_img" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
				<swiper v-else class="swiper">
张成 committed
14
					<swiper-item v-for="item in goodInfo.pics.introImages" :key="item">
张成 committed
15
						<image :src="item" class="swiper_img" mode="scaleToFill"></image>
张成 committed
16 17 18 19 20 21
					</swiper-item>
				</swiper>
			</view>
			<view class="good spec-info-left">
				<text class="good-name">{{ goodInfo.name }}</text>
				<view class="specs">
张成 committed
22
					<!-- 规格 -->
张成 committed
23 24 25
					<view v-for="specItem in goodInfo.specs" :key="specItem.specId">
						<view class="good-spec-name">{{ specItem.specName }}</view>
						<view class="good-spec-rule">
张成 committed
26
							<div v-for="specItemRule in specItem.rules" class="div_item" :key="specItemRule.ruleId">
1  
weijiguang committed
27
								<div v-if="specItemRule.isRecommend=='1'" class="default">推荐</div>
张成 committed
28 29 30 31 32 33
								<button class="good-spec-rule-item" :disabled="UseIt(specItemRule.ruleId)"
									@click="selectRoles(specItemRule, specItem)"
									:class="{ active: isActvie(specItemRule) }">
									<view>{{ specItemRule.ruleName }}</view>
								</button>
							</div>
张成 committed
34
						</view>
zhangcheng committed
35 36 37
					</view>
				</view>
			</view>
张成 committed
38
			<view class="spec-detail">
39
				<view class="spec-detail-title spec-info-left">商品详细</view>
张成 committed
40 41 42 43 44 45
				<view v-if="goodInfo.pics.detailImagesApplet">
					<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImagesApplet" :key="item">
						<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image>
					</view>
				</view>
				<view v-else class="spec-detail-img" v-for="item in goodInfo.pics.detailImages" :key="item">
张成 committed
46 47 48 49
					<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image>
				</view>
				<!-- 底部空白 -->
				<view class="good-select-height"></view>
zhangcheng committed
50
			</view>
张成 committed
51

52
			<view class="good-select good-select-height" :style="{'padding-bottom':BottomSafeHeight+'px'}">
张成 committed
53
				<view class="good-select-price">
张成 committed
54
					<div>
songbingqi committed
55 56
						<text class="good-select-price-normal">{{ Utils.isInteger(priceTotal.discount) }}</text>
						<text class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">{{ Utils.isInteger(priceTotal.price) }}</text>
张成 committed
57
					</div>
weijiguang committed
58
					<div v-if="!size > 0" style="color: orangered">已售罄</div>
张成 committed
59
					<div v-else class="set_size">
60
						<view class="subtract" @click="reduceGood"></view>
张成 committed
61
						<span>{{ size }}</span>
62 63 64
						<view class="add" @click="addGood" ></view>
						<!-- <u-icon name="minus-circle" @click="reduceGood" color="#2979ff" size="22"></u-icon> -->
						<!-- <u-icon name="plus-circle-fill" color="#2979ff" @click="addGood" size="22"></u-icon> -->
张成 committed
65
					</div>
张成 committed
66
				</view>
张成 committed
67
				<view v-if="size > 0" class="good-select-cont">
68 69 70 71 72 73 74 75 76 77
					<view>
						<a class="good-select-btn1" @click="getallNum()" v-if="userms">
							立即购买
						</a>
						<button v-if="!userms" class="good-select-btn1" style="border-radius: 0;" open-type="getPhoneNumber"
							@getphonenumber="getallNum">
							立即购买
						</button>
					</view>

张成 committed
78
					<span class="good-select-btn2" @click="shoppingCart" type="default">加入购物袋</span>
张成 committed
79
				</view>
zhangcheng committed
80 81
			</view>
		</view>
82
		<show-toast ref="toast"/>
83 84 85 86
	</view>
</template>

<script>
张成 committed
87 88 89 90 91 92 93 94
import Utils from '@/utils/utils'
import User from '@/request/user';
export default {
	data() {
		return {
			title: 'Hello1',
			imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
			goodInfo: null,
张成 committed
95 96 97 98
			selected: [],
			available: [],
			goods: {},
			skusDefault: [],
99
			skusSellout: [],
100
			loginInfo:"",
张成 committed
101 102
			pirce: 0,
			size: 0,
103 104
			topBarTop:0,
			topBarHeight:0,
songbingqi committed
105 106
			BottomSafeHeight:0,
			Utils
张成 committed
107 108
		}
	},
张成 committed
109 110
	onShow() {
		uni.removeStorageSync('goodsList');
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
		this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')
	},
	mounted(){
		// 获取胶囊坐标位置
    	const res = wx.getMenuButtonBoundingClientRect()
    	const menuInfoTop = res.top 
    	const menuInfoBottom = res.bottom
		const menuHeight = res.height
		let headHeight = 0
		wx.getSystemInfo({
    	  success: (res) => {
    	    headHeight = res.statusBarHeight
    	  }
    	})
		this.topBarTop = menuInfoTop
		this.topBarHeight = menuHeight
张成 committed
127 128
	},
	onLoad() {
129 130 131 132 133
		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
张成 committed
134 135 136
		uni.removeStorageSync('goodsList');
		const goodsInfo = JSON.parse(uni.getStorageSync('goodsInfo'));
		this.goodInfo = goodsInfo;
1  
weijiguang committed
137
		console.log(this.goodInfo);
张成 committed
138 139 140 141
		const skus = goodsInfo.skus;
		if (skus) {
			const sku = skus.find(v => v.isDefault == 1 && v.state == 1) || skus.find(v => v.isDefault == 0 && v.state == 1);
			this.skusDefault = skus.find(v => v.isDefault == 1);
142 143 144 145
			this.skusSellout = skus.find(v => v.isDefault == 1 && v.state == 1)
				|| skus.find(v => v.state == 1)
				|| skus.find(v => v.isDefault == 1)
				|| skus[0]
张成 committed
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
			if (!sku) return;
			this.selected.push(...sku.rules)
			skus.forEach(item => {
				if (item.state == 1) {
					item.rules.forEach(rule => {
						this.available.push(rule.ruleId)
					})
				}
			})
		}
		this.$nextTick(() => {
			this.buildGoods(e => {
				if (e) {
					this.size = 1
				} else {
					this.size = 0
				}
			})

		})
张成 committed
166 167
	},
	methods: {
168 169 170 171 172
		goBack(){
			wx.navigateBack({
    			delta: 1
  			});
		},
张成 committed
173 174 175 176 177 178 179 180 181 182 183 184
		setDefaultStyle(id) {
			let selected = false;
			if (this.skusDefault && this.skusDefault.rules) {
				this.skusDefault.rules.forEach(item => {
					if (item.ruleId == id) {
						selected = true
					}
				});
			}

			return selected
		},
张成 committed
185 186 187 188 189
		selectRoles(specItemRule, parent) {
			const { selected } = this;
			selected.forEach((item, index) => {
				if (item.specId == parent.specId) {
					selected.splice(index, 1)
zhangcheng committed
190
				}
张成 committed
191 192
			});
			this.selected.push({ ...specItemRule, specId: parent.specId })
张成 committed
193
			this.buildGoods()
194
		},
张成 committed
195 196 197
		isActvie(data) {
			return this.selected.filter(item => item.ruleId == data.ruleId).length > 0
		},
张成 committed
198
		buildGoods(callback) {
张成 committed
199 200 201 202 203 204 205 206 207 208 209
			const skusObj = {};
			let selectedSku = null
			const skus = this.goodInfo.skus;
			skus.forEach(item => {
				const ruleId = item.rules.map(item => item.ruleId);
				skusObj[item.skuId] = ruleId.sort()
			});
			const selectedrules = this.selected.map(item => item.ruleId).sort()
			for (let item in skusObj) {
				const selStr = selectedrules.toString()
				const itemStr = skusObj[item].toString()
张成 committed
210
				if (selStr === itemStr) selectedSku = item;
张成 committed
211 212
			}
			const [sku] = skus.filter(item => item.skuId == selectedSku);
张成 committed
213
			if (!sku || skus.state == 2) {
214
				this.showToast({ title: '本商品已经售罄', icon: 'none' });
张成 committed
215
				callback && callback()
张成 committed
216 217 218 219 220 221 222 223
			} else {
				const { category, ...goods } = this.goodInfo;
				goods.skus = [sku];
				goods.sku = sku
				goods.flag = true;
				goods.skuId = selectedSku
				goods.categoryId = category.id;
				goods.goodsName = category.name;
张成 committed
224 225 226 227
				this.goods = goods
				callback && callback(true)
			}
		},
songbingqi committed
228 229 230 231
		checkNum(type){
			const shopCarInfo = uni.getStorageSync('shopCarInfo') || []
			let shopCarNum = (type=='add'?1:0)
			shopCarInfo.forEach(item=> shopCarNum+=item.num)
232
			let countOfOrder = uni.getStorageSync('countOfOrder');
songbingqi committed
233 234
			if ((this.size + shopCarNum) <= countOfOrder) {
				return true
张成 committed
235
			} else {
236
				this.showToast({
237
					title: '最多可一次购买'+countOfOrder+'杯',
张成 committed
238 239 240
					icon: 'none',
				});
			}
zhangcheng committed
241

张成 committed
242
		},
songbingqi committed
243 244 245 246 247
		addGood() {
			if(this.checkNum('add')){
				this.size = this.size + 1;
			}
		},
张成 committed
248 249 250 251
		reduceGood() {
			const { size } = this
			if (size > 1) {
				this.size = size - 1;
张成 committed
252
			}
张成 committed
253 254
		},
		shoppingCart() {
songbingqi committed
255 256 257 258 259 260
			if(this.checkNum('addShop')){
				const { goods } = this;
				goods.num = this.size;
				Utils.getallNum(goods)
				uni.switchTab({ url: '/pages/menu/menu' })
			}
张成 committed
261 262 263 264 265 266 267 268 269 270 271
		},
		getallNum(e) {
			let Authorization = uni.getStorageSync('Authorization');
			if (!Authorization) {
				this.loginByPhoneNumber(e);
				return
			}
			const { goods } = this;
			goods.num = this.size
			Utils.addGoods(goods)
			uni.navigateTo({ url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1` })
张成 committed
272 273 274 275
		},
		// 付款前未登录发起授权
		loginByPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
276
				e.loginInfo = this.loginInfo
张成 committed
277 278
				User.getPhoneNumber(e);
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
279
				this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
张成 committed
280 281
			}
		},
张成 committed
282 283 284
		UseIt(ruleId) {
			return this.available.indexOf(ruleId) == -1
		}
张成 committed
285 286 287 288
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
zhangcheng committed
289
		},
张成 committed
290 291 292
		priceTotal() {
			let discount = 0;
			let price = 0;
293
			const { goods,skusSellout } = this;
张成 committed
294 295 296
			if (goods.sku) {
				discount = goods.sku.discount * this.size
				price = goods.sku.price * this.size
297 298 299
			}else if(skusSellout){
				discount = Number(skusSellout.discount)
				price = Number(skusSellout.price)
张成 committed
300 301 302 303
			}
			return { discount: discount.toFixed(2), price: price.toFixed(2) }
		}

zhangcheng committed
304

张成 committed
305
	},
张成 committed
306

张成 committed
307
}
308 309
</script>

zhangcheng committed
310
<style lang="scss">
311 312 313 314 315 316 317 318 319 320
.topBar{
	// border: 1px solid red;
	position: fixed;
	z-index: 10;
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 34rpx;
}

张成 committed
321 322 323 324 325 326
.uni-margin-wrap {
	width: 100%;
}


.swiper {
327
	height: 561rpx;
张成 committed
328 329 330 331 332 333 334 335
	width: 100%;
}

.swiper_img {
	width: 100%;
	height: 100% !important;
}

张成 committed
336 337 338 339
.spec-content {
	width: 100%;
	overflow-x: hidden;
}
张成 committed
340 341

.spec-info-left {
342
	padding: 24rpx 32rpx;
张成 committed
343 344 345 346 347 348 349 350 351 352 353 354 355

}

.specs {
	margin-top: 30rpx;
}

.good {
	display: block;
	width: 100%;
	text-align: left;

	.good-name {
356 357 358 359
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
zhangcheng committed
360
		line-height: 44rpx;
zhangcheng committed
361
		margin-top: 24rpx;
zhangcheng committed
362
	}
张成 committed
363 364

	.good-spec-name {
365 366 367 368 369
		margin-top: 51rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #999999;
		font-weight: 400;
		font-size: 24rpx;
zhangcheng committed
370
		text-align: left;
张成 committed
371
		line-height: 40rpx;
zhangcheng committed
372
	}
张成 committed
373 374

	.good-spec-rule {
zhangcheng committed
375 376
		display: flex;
		flex-direction: row;
张成 committed
377
		justify-content: flex-start;
378
		margin-top: 26rpx;
张成 committed
379
		flex-wrap: wrap;
380
		border-radius: 0rpx;
张成 committed
381 382 383 384 385

		.div_item {
			position: relative;
			width: 120rpx;
			height: 48rpx;
386
			margin-right: 32rpx;
张成 committed
387 388 389 390
			line-height: 48rpx;


			.default {
391 392 393
				width: 42rpx;
				height: 25rpx;
				background-color: #ed79c5;
张成 committed
394
				position: absolute;
395 396 397 398 399 400 401
				right: -17rpx;
				top: -15rpx;
				z-index: 9;
				font-size: 13rpx;
				line-height: 25rpx;
				text-align: center;
				color: white;
张成 committed
402 403 404 405
			}

		}

zhangcheng committed
406
	}
张成 committed
407 408 409
}

.good-spec-rule-item {
张成 committed
410 411
	width: 100%;
	height: 100%;
张成 committed
412
	font-size: 24rpx;
413
	color: #333333;
张成 committed
414
	text-align: center;
415
	font-weight: 400;
张成 committed
416
	display: inline-block;
张成 committed
417 418 419 420
	margin: 0;
	margin: 0;
	padding: 0;
	line-height: 50rpx;
421 422 423 424
	border-radius: 0rpx;
	border: none;
	font-family: PingFangSC-Regular, PingFang SC;
	background: #EAEAEA;
张成 committed
425

张成 committed
426
	&.active {
427 428
		font-weight: 400;
		background: #003AE9;
张成 committed
429
		color: #fff;
430 431 432
		border-radius: 0rpx;
		border: 0rpx;
		font-family: PingFangSC-Regular, PingFang SC;
zhangcheng committed
433
	}
张成 committed
434 435
}

436 437 438 439 440 441 442 443 444
.good-spec-rule-item::after{
	border-radius: 0rpx;
	border: 0rpx;
}

// button[disabled]:not([type]) {
// 	background: red;
// }

张成 committed
445 446 447 448 449 450
.spec-detail {
	width: 100%;
	height: 100%;
}

.spec-detail-title {
451 452 453 454 455 456
	width: 112rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	color: #333333;
	line-height: 40px;
张成 committed
457 458 459
}

.spec-detail-img {
460 461 462
	margin-top: 55rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
张成 committed
463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479
	height: 500rpx;
}

.spec-detail-img-item {
	width: 100%;
	height: 100%;
}

.good-select-height {
	height: 200rpx;
}

.good-select {
	width: 100%;
	position: fixed;
	bottom: 0rpx;
	text-align: center;
480
	height: 268rpx;
张成 committed
481
	background-color: #fff;
张成 committed
482 483
	height: auto;
	padding-bottom: 20rpx;
张成 committed
484 485 486 487 488
}

.good-select-price {
	display: flex;
	align-items: center;
489
	height: 68rpx;
张成 committed
490
	background: #FFFFFF;
张成 committed
491
	justify-content: space-between;
492 493
	align-items: center;
	padding: 22rpx 32rpx;
张成 committed
494 495 496
}

.good-select-price-normal {
497 498 499 500 501 502
	font-family: Futura-Medium, Futura;
	letter-spacing: 1px;
	font-size: 32rpx;
	color: #333333;
	margin-right: 12rpx;
	font-weight: 500;
张成 committed
503 504 505 506 507
}

.good-select-price-small {
	font-size: 20rpx;
	text-decoration: line-through;
508 509
	font-family: ArialMT;
	color: #999999;
张成 committed
510 511 512 513 514 515 516 517
}

.good-select-cont {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	justify-content: space-between;
518
	padding: 0 30rpx;
张成 committed
519 520 521 522
}

.good-select-btn1 {
	width: 328rpx;
523 524 525
	height: 104rpx;
	border: 2rpx solid #003AE9;
	font-size: 28rpx;
张成 committed
526 527
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
528 529 530
	color: #003AE9;
	border-radius: 2px;
	line-height: 104rpx;
张成 committed
531
	text-align: center;
532
	background: #FFFFFF;
张成 committed
533 534 535 536
}

.good-select-btn2 {
	width: 328rpx;
537 538 539 540 541 542
	height: 104rpx;
	border-radius: 2px;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	background: #003AE9;
	line-height: 104rpx;
张成 committed
543 544 545
	text-align: center;
	color: #fff;
}
张成 committed
546 547 548

.set_size {
	display: flex;
549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564
	width: 150rpx;
	justify-content: space-between;
	align-items: center;
	.subtract {
		width: 40rpx;
		height: 40rpx;
		background: url('@/static/imgs/jianhao.png') center center no-repeat;
		background-size:100% 100%;
		
	}
	.add {
		width: 40rpx;
		height: 40rpx;
		background: url('@/static/imgs/jiahao.png') center center no-repeat;
		background-size:100% 100%;
	}
张成 committed
565
	span {
566 567 568 569
		margin: 0 26rpx;
		font-size: 32rpx;
		font-family: ArialMT;
		color: #000000;
张成 committed
570 571
	}
}
572
</style>