hjt_erdao_WeChatApplet/pages/merchant/home/shop.vue

<template>
	<view class="main main-bg">
		<!-- <view class="other" @click="handleOther">
			其他商品
		</view> -->
		<view class="view-list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list">
				<image :src="image(item.goodsPic)" @tap="preAvatar(image(item.goodsPic))"></image>
				<view class="item-footer">
					<view class="name font-twenty">{{item.goodsName}}</view>
					<view class="yuan font-twenty font-color2">商品原价: ￥{{item.goodsRatePrice ?item.goodsRatePrice : 1}}</view>
					<view class="yuan font-twenty font-color5">商品折扣: {{item.goodsPrice ? item.goodsPrice : 1}}</view>
					<view class="yuan font-twenty font-color5">折扣价格: ￥{{ (item.goodsRatePrice*(item.goodsPrice||1)).toFixed(1) }}</view>
					<view class="icon">
						<u-icon name="heart" size="32" v-if="!item.show"  @click="handleShow(index, item.show, item)"></u-icon>
						<u-icon name="heart-fill" size="32" color="#CC1019" v-if="item.show"  @click="handleShow(index, item.show, item)"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center; padding-top: 100rpx;" v-else>
			<u-empty mode="list"></u-empty>
		</view>
		<view class="footer">
			<view class="left header-long-bg font-color1 font-thirty" @click="handleGou">购买结算</view>
			<view class="right font-color2 font-thirty" @click="goto">返回店铺</view>
		</view>
		<u-popup ref="order" mode="bottom" v-model="showPopup" length="100%">
		<!-- <ming-pop ref="order" direction="below" :is_mask="true" :width="100" height="100%" :maskFun="true"> -->
			<u-icon style="padding-left: calc(100% - 80rpx); padding-top: 20rpx;" size="32" name="backspace" @click="close()"></u-icon>
			
				<view class="order-list main-bg">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="order-item" v-for="(item, index) in newList">
						<view class="order-item-header">
							<image :src="image(item.goodsPic)" @tap="preAvatar(image(item.goodsPic))"></image>
							<view  class="order-item-header-right">
								<view class="name font-twenty">{{item.goodsName}}</view>
								<view class="yuan font-twenty font-color2">商品原价: ￥{{item.goodsRatePrice ?item.goodsRatePrice : 0}}</view>
								<view class="yuan font-twenty font-color5">
									<span style="padding-right: 32rpx;">商品折扣: {{item.goodsPrice ? item.goodsPrice : 1}}</span>
									<u-icon name="edit-pen" @click="handleShowZhe(index, item)"></u-icon>
								</view>
								<view class="name font-twenty" style="padding-top: 20rpx;">
									<span style="padding-right: 15rpx;">数量： </span>
									<u-icon name="minus-circle" @click="handleJian(index, item)"></u-icon>
									<span style="color: #000; padding-left: 20rpx; padding-right: 20rpx;" @click="changeNum(index, item)">{{item.num}}</span>
									<u-icon name="plus-circle" @click="handleJia(index, item)"></u-icon>
								</view>
							</view>
						</view>
						<view class="order-item-footer font-twenty font-color2">
							单价: {{ (item.all || 0).toFixed(2) }}
						</view>
					</view>
				</scroll-view>
					<view class="footer1">
						<view class="total font-color2 font-twenty">合计: ￥{{ (total || 0).toFixed(2) }}</view>
						<view class="left header-long-bg font-color1 font-thirty" @click="handleTotal">调整折扣</view>
						<view class="right font-color2 font-thirty" @click="handleAdd">确认结算</view>
					</view>
				</view>
			
		</u-popup>
		<!-- </ming-pop> -->
		<!-- <ming-pop ref="zhe" direction="below" :is_mask="true" :width="100" height="50%" :maskFun="true"> -->
		<u-popup ref="zhe" mode="bottom" v-model="showZhe" length="45%">
			<zhe @close="closeZhe()" ref="zheli" @add="changeZhe" @total="changeTotal"></zhe>
		</u-popup>
		<!-- </ming-pop> -->
		<!-- <ming-pop ref="number" direction="below" :is_mask="true" :width="100" height="50%" :maskFun="true"> -->
		<u-popup ref="number" mode="bottom" v-model="showNumber" length="45%">
			<count @close="closeCount()" ref="count" @add="changeCount"></count>
		</u-popup>
		<u-popup ref="img" mode="bottom" v-model="showImg" length="100%">
			<view class="liet">
				<view class="title">
					<u-icon name="close" @click="closeImg()"></u-icon>
				</view>
				<view class="font-color2 font-twenty">上传证件</view>
				<u-upload
					width="160"
					height="160"
					:action="action"
					max-count="3" 
					@on-success="onSuccess">
				</u-upload>
				<view class="right1 font-color2 font-thirty" @click="handleSubmit">确认</view>
			</view>
		</u-popup>
		<!-- </ming-pop> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import server from "@/api/index";
import http from '@/common/http.js'
import zhe from '@/components/pop/zhe.vue'
import count from '@/components/pop/count.vue'
export default {
	components:{
		zhe,
		count
	},
	data() {
		return {
			action: http.webUrl+`/wx/common/upload`,
			userInfo: null,
			showPopup: false,
			showZhe: false,
			showNumber: false,
			showImg: false,
			userId: 0,
			type: '',
			total: null,
			yuan: null,
			list: [],
			newList: [],
			picUrlList: [],
			discount: 1,
			youhuiTotal: 0,
			veteransName: ''
		}
	},
	onLoad(e) {
		this.userInfo = uni.getStorageSync('userInfo');
		if(e.userId){
			this.userId = parseInt(e.userId);
			this.type = e.type;
			this.veteransName = e.veteransName
		}
		this.getListFn(this.userInfo.nickName);
		setTimeout(function () {
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.getListFn(this.userInfo.nickName);
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods:{
		handleGou(){
			if(this.newList.length > 0){
				this.showPopup = true;
			}else{
				// this.showImg = true;
				this.handleOther();
			}
		},
		onSuccess(data, index, lists, name){
			console.log(data, index, lists, name)
			this.picUrlList = [];
			lists.forEach(item =>{
				this.picUrlList.push(item.response.fileName)
			})
			console.log('data.fileName', data.fileName)
			console.log('this.picUrlList ',this.picUrlList)
		},
		handleAdd(){
			this.showImg = true;
			// this.handleSubmit();
		},
		handleSubmit(){
			console.log('newList', this.newList)
			console.log('this.picUrlList handleSubmit',this.picUrlList)
			let detailedlist = [];
			this.newList.forEach(item =>{
				detailedlist.push({
					shopsName: item.goodsName,
					shopsNum: item.num,
					priceOld: item.goodsRatePrice,
					priceVip: item.goodsPrice*item.goodsRatePrice
				})
			})
			console.log(detailedlist)
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认结算吗?',
				success: function (res) {
					if (res.confirm) {
						let params = {
							shopsId: that.userInfo.nickName,
							goodsName: that.userInfo.userName,
							veteransName: that.veteransName,
							veteransId: that.userId,
							remark: that.type,
							orderPriceOld: that.yuan,
							orderPriceVip: that.total,
							picUrlList: that.picUrlList,
							detailedlist: detailedlist
						}
						console.log('params', params)
						server.addOrderInfo(params).then(res =>{
							that.$refs.uToast.show({
								title: '操作成功!',
								type: 'default',
							})
							setTimeout(function()  {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 2000);
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		},
		changeTotal(data){
			console.log(data)
			this.total = this.youhuiTotal*data;
			this.discount = data;
		},
		handleTotal(){
			console.log("99999")
			this.showZhe = true;
			// this.$refs.zhe.show();
			this.$refs.zheli.show();
		},
		changeNum(index, item){
			this.showNumber = true;
			// this.$refs.number.show();
			this.$refs.count.shows(item.goodsPrice, item.goodsRatePrice, index);
		},
		handleShowZhe(index, item){
			// this.$refs.zhe.show();
			this.showZhe = true;
			this.$refs.zheli.shows(item.goodsPrice, item.goodsRatePrice, item.num, index);
		},
		handleJian(index, item){
			if(this.newList[index].num >= 1){
				this.newList[index].num = this.newList[index].num - 1;
				this.newList[index].all = item.goodsRatePrice*(item.goodsPrice || 1)*item.num;
				this.total =null;
				this.goodsRatePrice =null;
				this.yuan = null;
				this.newList.forEach(item =>{
					console.log(item.goodsRatePrice, item.num)
					this.total += item.all;
					this.yuan += parseFloat(item.goodsRatePrice)*item.num;
				})
				this.youhuiTotal = this.total;
				this.total = this.total * this.discount;
			}
		},
		handleJia(index, item){
			this.newList[index].num = this.newList[index].num + 1
			this.newList[index].all = item.goodsRatePrice*(item.goodsPrice || 1)*item.num;
			this.total =null;
			this.goodsRatePrice =null;
			this.yuan = null;
			this.newList.forEach(item =>{
				console.log(item.goodsRatePrice, item.num)
				this.total += item.all;
				this.yuan += parseFloat(item.goodsRatePrice)*item.num;
			})
			this.youhuiTotal = this.total;
			this.total = this.total * this.discount;
		},
		changeCount(num, goodsPrice, goodsRatePrice, index){
			this.newList[index].num =num
			this.newList[index].all =goodsRatePrice*goodsPrice*num
			this.total =null;
			this.goodsRatePrice =null;
			this.yuan = null;
			this.newList.forEach(item =>{
				this.total += parseFloat(item.all);
				this.yuan += parseFloat(item.goodsRatePrice)*item.num;
			})
			this.youhuiTotal = this.total;
			this.total = this.total * this.discount;
		},
		changeZhe(data, goodsRatePrice,num, index){
			this.newList[index].goodsPrice =data
			this.newList[index].all =goodsRatePrice*data*num
			this.total =null;
			this.goodsRatePrice =null;
			this.yuan = null;
			this.newList.forEach(item =>{
				this.total += parseFloat(item.all);
				console.log(item.goodsRatePrice, item.num)
				this.yuan += parseFloat(item.goodsRatePrice)*item.num;
			})
			this.youhuiTotal = this.total;
			this.total = this.total * this.discount;
		},
		goto(){
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
		handleOther(){
			uni.navigateTo({
				url: '/pages/merchant/home/account?veteransName='+ this.veteransName + '&veteransId=' + this.userId + '&remark=' + this.type
			})
		},
		show() {
			this.$refs.order.show();
		},
		closeZhe() {
			this.$refs.zhe.close();
		},
		closeCount() {
			this.$refs.number.close();
		},
		closeImg(){
			this.$refs.img.close();
		},
		close() {
			this.$refs.order.close();
		},
		handleShow(index, type, item){
			if(type){
				this.newList.forEach((item, count) =>{
					if(item.index === index){
						this.newList.splice(count,1);
					}
				})
			}else{
				this.newList.push({
					...item,
					index: index,
					all: item.goodsRatePrice*(item.goodsPrice || 1),
					num: 1,
				})
			}
			this.total =null;
			this.yuan = null;
			this.newList.forEach(item =>{
				this.total += parseFloat(item.all);
				this.yuan += parseFloat(item.goodsRatePrice);
			})
			this.youhuiTotal = this.total;
			this.list[index].show = !this.list[index].show
		},
		// 预览图片
		preAvatar(url) {
			wx.previewImage({
				current: url, // 当前显示图片的 http 链接
				urls: [url] ,// 需要预览的图片 http 链接列表
			})
		},
		image(e) {
			return http.webUrl + e
		},
		getListFn(id){
			server.getGoodsInfo({shopsId: id, goodsStatus :'2'}).then(res =>{
				this.list = [];
				if(res){
					res.forEach(item =>{
						this.list.push({
							...item,
							show: false,
						})
					})
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
	.liet{
		padding: 30rpx;
		background: #fff;
		min-height: 100vh;
	}
	.title {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: flex-end;
		.close {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.main{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 30rpx;
		.other{
			width: 100%;
			height: 100rpx;
			margin-bottom: 30rpx;
			background-color: #fff;
			text-align: center;
			border-radius: 8rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 2rpx;
		}
		.view-list{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 100rpx;
			.item{
				width: calc(50% - 15rpx);
				height: 490rpx;
				background: #fff;
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				image{
					width: 100%;
					height: 228rpx;
					border-top-right-radius: 8rpx;
					border-top-left-radius: 8rpx;
				}
				.item-footer{
					padding: 10rpx 20rpx 0rpx 20rpx;
					position: relative;
					.icon{
						position: absolute;
						bottom: 0rpx;
						right: 20rpx;
					}
				}
			}
		}
	}
	.footer1{
		width: 100%;
		height: 125rpx;
		background: #FFFFFF;
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		left: 0rpx;
		bottom: 0rpx;
		padding: 14rpx 30rpx;
		display: flex;
		justify-content: space-between;
		z-index: 10;
		.total{
			height: 96rpx;
			line-height: 96rpx;
			font-weight: 600;
		}
		.left{
			width: 180rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
		}
		.right{
			width: 180rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
			border: 4rpx solid #2E4F1C;
		}
	}
	.right1{
		width: 570rpx;
		height: 96rpx;
		background: linear-gradient(117deg, #5B873C 0%, #2E4F1C 100%);
		border-radius: 49rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
		margin: 90rpx auto;
	}
	.footer{
		width: 100%;
		height: 125rpx;
		background: #FFFFFF;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		padding: 14rpx 30rpx;
		display: flex;
		justify-content: space-between;
		z-index: 10;
		.left{
			width: 330rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
		}
		.right{
			width: 330rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
			border: 4rpx solid #2E4F1C;
		}
	}
	/deep/ .product-window{
		    position: fixed!important;
		    background-color: #F8F8F8!important;
			padding: 0rpx!important;
		    z-index: 77!important;
		    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9)!important;
		    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9)!important;
	}
	.order-list{
		position: relative;
		padding: 30rpx 30rpx 0rpx 30rpx;
		// overflow: scroll;
		min-height: 100vh;
		// height: auto;
		.order-item{
			width: 100%;
			height: 341rpx;
			background: #fff;
			margin-bottom: 30rpx;
			border-radius: 8rpx;
			.order-item-header{
				height: 238rpx;
				display: flex;
				border-bottom: 2rpx solid #CCCCCC;
				image{
					width: 238rpx;
					height: 238rpx;
					background: #D8D8D8;
				}
				.order-item-header-right{
					padding-left: 20rpx;
					padding-top: 8rpx;
				}
			}
			.order-item-footer{
				text-align: right;
				height: 101rpx;
				line-height: 101rpx;
				padding-right: 30rpx;
			}
		}
	}
	.name{
		color: #000000;
	}
	.yuan{
		padding-top: 20rpx;
	}
</style>