goodsDetail.vue 15.3 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">
宋冰琦 committed
27
								<div v-if="specItemRule.isRecommend=='1'" :class="[UseIt(specItemRule.ruleId)?'disabledStyle':'']" class="default"></div>
张成 committed
28 29 30
								<button class="good-spec-rule-item" :disabled="UseIt(specItemRule.ruleId)"
									@click="selectRoles(specItemRule, specItem)"
									:class="{ active: isActvie(specItemRule) }">
songbingqi committed
31
									{{ specItemRule.ruleName }}
张成 committed
32 33
								</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 class="price">
songbingqi committed
55
						<view class="good-select-price-normal"><text class="moneyLog"></text>{{ Utils.isInteger(priceTotal.discount) }}</view>
宋冰琦 committed
56
						<view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">{{ Utils.isInteger(priceTotal.price) }}</view>
张成 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
import Utils from '@/utils/utils'
import User from '@/request/user';
songbingqi committed
89
import Order from '@/request/order'
张成 committed
90 91 92 93 94 95
export default {
	data() {
		return {
			title: 'Hello1',
			imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
			goodInfo: null,
张成 committed
96 97 98 99
			selected: [],
			available: [],
			goods: {},
			skusDefault: [],
100
			skusSellout: [],
101
			loginInfo:"",
张成 committed
102
			pirce: 0,
103
			size: 1,
104 105
			topBarTop:0,
			topBarHeight:0,
songbingqi committed
106
			BottomSafeHeight:0,
107
			Utils,
张成 committed
108 109
		}
	},
张成 committed
110 111
	onShow() {
		uni.removeStorageSync('goodsList');
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
		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
128 129
	},
	onLoad() {
130 131 132 133 134
		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
张成 committed
135 136 137
		uni.removeStorageSync('goodsList');
		const goodsInfo = JSON.parse(uni.getStorageSync('goodsInfo'));
		this.goodInfo = goodsInfo;
宋冰琦 committed
138
		console.log(JSON.parse(JSON.stringify(this.goodInfo)));
张成 committed
139

140
		this.initInfo(this.goodInfo)
张成 committed
141
	},
142 143 144 145 146 147 148 149 150
	// watch:{
	// 	selected(val){
	// 		console.log(val,'val')
	// 		const {skus,specs} = this.goodInfo
	// 		console.log(skus,'--------skus',specs,'--------specs')
	// 		const ruleIdList = val.map(res=>res.ruleId)
	// 		console.log(ruleIdList)
	// 	}
	// },
张成 committed
151
	methods: {
152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
		initInfo(goodsInfo){
			this.available = []
			this.selected = []
			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);
				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]
				if (sku){
					this.selected.push(...sku.rules)
				}else{
					this.selected = []
				};
				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
					}
				})
				this.$forceUpdate()
			})
		},
188 189 190 191 192
		goBack(){
			wx.navigateBack({
    			delta: 1
  			});
		},
张成 committed
193 194 195 196 197 198 199 200 201 202 203 204
		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
205 206 207 208 209
		selectRoles(specItemRule, parent) {
			const { selected } = this;
			selected.forEach((item, index) => {
				if (item.specId == parent.specId) {
					selected.splice(index, 1)
zhangcheng committed
210
				}
张成 committed
211 212
			});
			this.selected.push({ ...specItemRule, specId: parent.specId })
张成 committed
213
			this.buildGoods()
214
		},
张成 committed
215 216 217
		isActvie(data) {
			return this.selected.filter(item => item.ruleId == data.ruleId).length > 0
		},
张成 committed
218
		buildGoods(callback) {
张成 committed
219 220 221 222 223 224 225 226 227 228 229
			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
230
				if (selStr === itemStr) selectedSku = item;
张成 committed
231 232
			}
			const [sku] = skus.filter(item => item.skuId == selectedSku);
张成 committed
233
			if (!sku || skus.state == 2) {
234
				this.showToast({ title: '本商品已经售罄', icon: 'none' });
张成 committed
235
				callback && callback()
张成 committed
236 237 238 239 240 241 242 243
			} 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
244 245 246 247
				this.goods = goods
				callback && callback(true)
			}
		},
songbingqi committed
248 249 250 251
		checkNum(type){
			const shopCarInfo = uni.getStorageSync('shopCarInfo') || []
			let shopCarNum = (type=='add'?1:0)
			shopCarInfo.forEach(item=> shopCarNum+=item.num)
252
			let countOfOrder = uni.getStorageSync('countOfOrder');
253
			if ((Number(this.size) + Number(shopCarNum)) <= countOfOrder) {
songbingqi committed
254
				return true
张成 committed
255
			} else {
256
				this.showToast({
257
					title: '最多可一次购买'+countOfOrder+'杯',
张成 committed
258 259 260
					icon: 'none',
				});
			}
zhangcheng committed
261

张成 committed
262
		},
songbingqi committed
263 264 265 266 267
		addGood() {
			if(this.checkNum('add')){
				this.size = this.size + 1;
			}
		},
张成 committed
268 269 270 271
		reduceGood() {
			const { size } = this
			if (size > 1) {
				this.size = size - 1;
张成 committed
272
			}
张成 committed
273
		},
songbingqi committed
274
		async shoppingCart() {
songbingqi committed
275 276
			if(this.checkNum('addShop')){
				const { goods } = this;
songbingqi committed
277
				const { data } = await Order.checkSku({skuId:goods.skuId})
278 279 280 281 282 283 284 285 286 287
				const {state,goods:newgoods} = data.data

				const newInfo = JSON.parse(JSON.stringify(newgoods))
				newInfo.category = this.goodInfo.category
				// newInfo.skus.map(res=>res.state = '2')
				// newInfo.skus[0].state = '2'
				this.goodInfo = {...newInfo}
				this.initInfo(this.goodInfo)

				if(state == 2){
songbingqi committed
288 289 290 291 292 293 294
					this.showToast({ title: '本商品已经售罄', icon: 'none' });
					return;
				}else{
					goods.num = this.size;
					Utils.getallNum(goods)
					uni.switchTab({ url: '/pages/menu/menu' })
				}
295 296 297 298 299 300 301
				return
				// const { data } = await Order.checkSku({skuId:goods.skuId})
				// else{
				// 	goods.num = this.size;
				// 	Utils.getallNum(goods)
				// 	uni.switchTab({ url: '/pages/menu/menu' })
				// }
songbingqi committed
302
			}
张成 committed
303
		},
songbingqi committed
304
		async getallNum(e) {
张成 committed
305 306 307 308 309 310
			let Authorization = uni.getStorageSync('Authorization');
			if (!Authorization) {
				this.loginByPhoneNumber(e);
				return
			}
			const { goods } = this;
songbingqi committed
311
			const { data } = await Order.checkSku({skuId:goods.skuId})
宋冰琦 committed
312 313 314
			const {state,goods:newgoods} = data.data
			
			const newInfo = JSON.parse(JSON.stringify(newgoods))
315 316 317
			newInfo.category = this.goodInfo.category
			// newInfo.skus.map(res=>res.state = '2')
			// newInfo.skus[0].state = '2'
宋冰琦 committed
318
			this.goodInfo = {...newInfo}
319
			this.initInfo(this.goodInfo)
宋冰琦 committed
320

321
			if(state == 2){
songbingqi committed
322 323 324 325 326 327 328
				this.showToast({ title: '本商品已经售罄', icon: 'none' });
				return;
			}else{
				goods.num = this.size
				Utils.addGoods(goods)
				uni.navigateTo({ url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1` })
			}
张成 committed
329 330 331 332
		},
		// 付款前未登录发起授权
		loginByPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
333
				e.loginInfo = this.loginInfo
张成 committed
334 335
				User.getPhoneNumber(e);
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
336
				this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
张成 committed
337 338
			}
		},
张成 committed
339 340 341
		UseIt(ruleId) {
			return this.available.indexOf(ruleId) == -1
		}
张成 committed
342 343 344 345
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
zhangcheng committed
346
		},
张成 committed
347 348 349
		priceTotal() {
			let discount = 0;
			let price = 0;
350
			const { goods,skusSellout } = this;
张成 committed
351 352 353
			if (goods.sku) {
				discount = goods.sku.discount * this.size
				price = goods.sku.price * this.size
354 355 356
			}else if(skusSellout){
				discount = Number(skusSellout.discount)
				price = Number(skusSellout.price)
张成 committed
357 358 359 360
			}
			return { discount: discount.toFixed(2), price: price.toFixed(2) }
		}

zhangcheng committed
361

362
	}
张成 committed
363

张成 committed
364
}
365 366
</script>

zhangcheng committed
367
<style lang="scss">
368 369 370
.topBar{
	// border: 1px solid red;
	position: fixed;
371
	z-index: 99999999;
372 373 374 375 376 377
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 34rpx;
}

张成 committed
378 379 380 381 382 383
.uni-margin-wrap {
	width: 100%;
}


.swiper {
384
	height: 561rpx;
张成 committed
385 386 387 388 389 390 391 392
	width: 100%;
}

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

张成 committed
393 394 395 396
.spec-content {
	width: 100%;
	overflow-x: hidden;
}
张成 committed
397 398

.spec-info-left {
399
	padding: 24rpx 32rpx;
张成 committed
400 401 402 403 404 405 406 407 408 409 410 411 412

}

.specs {
	margin-top: 30rpx;
}

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

	.good-name {
413 414 415 416
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
songbingqi committed
417
		line-height: 40rpx;
zhangcheng committed
418
		margin-top: 24rpx;
1  
weijiguang committed
419
		padding-bottom: 22rpx;
zhangcheng committed
420
	}
张成 committed
421 422

	.good-spec-name {
1  
weijiguang committed
423
		margin-top: 30rpx;
424 425 426 427
		font-family: PingFangSC-Regular, PingFang SC;
		color: #999999;
		font-weight: 400;
		font-size: 24rpx;
zhangcheng committed
428
		text-align: left;
1  
weijiguang committed
429
		line-height: 34rpx;
zhangcheng committed
430
	}
张成 committed
431 432

	.good-spec-rule {
zhangcheng committed
433 434
		display: flex;
		flex-direction: row;
张成 committed
435
		justify-content: flex-start;
songbingqi committed
436
		margin-top: 26.02rpx;
张成 committed
437
		flex-wrap: wrap;
438
		border-radius: 0rpx;
张成 committed
439 440 441 442

		.div_item {
			position: relative;
			height: 48rpx;
443
			margin-right: 32rpx;
张成 committed
444
			line-height: 48rpx;
songbingqi committed
445
			min-width: 120rpx;
张成 committed
446 447 448


			.default {
宋冰琦 committed
449
				width: 45rpx;
songbingqi committed
450
				height: 48rpx;
宋冰琦 committed
451 452
				background: url('@/static/imgs/tuijian.png') center center no-repeat;
				background-size: 100%;
张成 committed
453
				position: absolute;
454 455 456
				right: -17rpx;
				top: -15rpx;
				z-index: 9;
张成 committed
457 458 459 460
			}

		}

zhangcheng committed
461
	}
张成 committed
462 463 464
}

.good-spec-rule-item {
songbingqi committed
465
	padding: 7rpx  48rpx;
张成 committed
466 467
	width: 100%;
	height: 100%;
张成 committed
468
	font-size: 24rpx;
469
	color: #333333;
张成 committed
470
	text-align: center;
471
	font-weight: 400;
张成 committed
472
	display: inline-block;
张成 committed
473 474
	margin: 0;
	margin: 0;
songbingqi committed
475
	line-height: 40rpx;
476 477 478 479
	border-radius: 0rpx;
	border: none;
	font-family: PingFangSC-Regular, PingFang SC;
	background: #EAEAEA;
张成 committed
480
	&.active {
481
		font-weight: 400;
songbingqi committed
482
		padding: 7rpx 48rpx 6rpx 48rpx;
宋冰琦 committed
483
		background: #0050F6;
songbingqi committed
484
		color: #FFFFFF;
485 486 487
		border-radius: 0rpx;
		border: 0rpx;
		font-family: PingFangSC-Regular, PingFang SC;
zhangcheng committed
488
	}
张成 committed
489 490
}

491 492 493 494 495
.good-spec-rule-item::after{
	border-radius: 0rpx;
	border: 0rpx;
}

宋冰琦 committed
496 497 498 499
button[disabled]:not([type]) {
	background: url('@/static/imgs/shouqingsku.png') center center no-repeat;
	background-size: 100%;
}
500

张成 committed
501 502 503 504 505 506
.spec-detail {
	width: 100%;
	height: 100%;
}

.spec-detail-title {
507 508 509 510 511
	width: 112rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	color: #333333;
songbingqi committed
512
	padding-top: 32rpx !important;
宋冰琦 committed
513
	padding-bottom:22rpx !important
张成 committed
514 515 516
}

.spec-detail-img {
517 518
	margin-left: 30rpx;
	margin-right: 30rpx;
张成 committed
519 520 521
	height: 500rpx;
}

宋冰琦 committed
522 523 524 525
.spec-detail-img:last-child{
	margin-bottom: 115rpx;
}

张成 committed
526 527 528 529 530 531 532 533 534 535 536 537 538 539
.spec-detail-img-item {
	width: 100%;
	height: 100%;
}

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

.good-select {
	width: 100%;
	position: fixed;
	bottom: 0rpx;
	text-align: center;
540
	height: 268rpx;
张成 committed
541
	background-color: #fff;
张成 committed
542 543
	height: auto;
	padding-bottom: 20rpx;
张成 committed
544 545 546 547 548
}

.good-select-price {
	display: flex;
	align-items: center;
549
	height: 68rpx;
张成 committed
550
	background: #FFFFFF;
张成 committed
551
	justify-content: space-between;
552 553
	align-items: center;
	padding: 22rpx 32rpx;
宋冰琦 committed
554 555 556 557 558 559 560 561 562 563 564 565
	.price{
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		.good-select-price-normal {
			font-family: Futura-Medium, Futura;
			letter-spacing: 1px;
			font-size: 32rpx;
			color: #333333;
			margin-right: 12rpx;
			font-weight: 500;
			line-height: 38rpx;
songbingqi committed
566 567 568
			.moneyLog {
				font-size: 28rpx;
			}
宋冰琦 committed
569 570 571 572 573 574
		}
		
		.good-select-price-small {
			font-size: 20rpx;
			text-decoration: line-through;
			font-family: ArialMT;
songbingqi committed
575
			line-height: 32rpx;
宋冰琦 committed
576 577 578
			color: #999999;
		}
	}
张成 committed
579 580 581 582 583 584 585 586 587 588
}



.good-select-cont {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	justify-content: space-between;
589
	padding: 0 30rpx;
张成 committed
590 591 592 593
}

.good-select-btn1 {
	width: 328rpx;
594
	height: 104rpx;
宋冰琦 committed
595
	border: 2rpx solid #0050F6;
596
	font-size: 28rpx;
张成 committed
597 598
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
宋冰琦 committed
599
	color: #0050F6;
600 601
	border-radius: 2px;
	line-height: 104rpx;
张成 committed
602
	text-align: center;
603
	background: #FFFFFF;
张成 committed
604 605 606 607
}

.good-select-btn2 {
	width: 328rpx;
608 609 610 611
	height: 104rpx;
	border-radius: 2px;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
宋冰琦 committed
612
	background: #0050F6;
613
	line-height: 104rpx;
张成 committed
614 615 616
	text-align: center;
	color: #fff;
}
张成 committed
617 618 619

.set_size {
	display: flex;
620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635
	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
636
	span {
songbingqi committed
637
		margin: 0 22rpx 0 26rpx;
638 639 640
		font-size: 32rpx;
		font-family: ArialMT;
		color: #000000;
张成 committed
641 642
	}
}
643
</style>