.

pages_order/components/address/addressList.vue → components/address/addressList.vue

@@ -11,7 +11,7 @@
 				<view class="address-item-top"
 				@click="select(item)">
 					<view class="img-box">
-						<image src="../../static/address/icon.png" mode="aspectFill"></image>
+						<image src="/static/image/address/icon.png" mode="aspectFill"></image>
 					</view>
 		
 					<view class="address-info">

pages_order/components/address/redactAddress.vue → components/address/redactAddress.vue

@@ -19,7 +19,7 @@
 					</uv-input>
 					<template #right>
 						<view style="padding-right: 40rpx;color: #FBAB32;" @click.stop="selectAddr">
-							<image src="../../static/address/selectIcon.png" mode="aspectFit"></image>定位
+							<image src="/static/image/address/selectIcon.png" mode="aspectFit"></image>定位
 						</view>
 					</template>
 				</uv-form-item>

pages/index/cart.vue

@@ -1,49 +1,38 @@
 <template>
 	<view class="page">
-		<navbar/>
+		<navbar />
 
 		<view class="user">
-			<uv-checkbox-group 
-			shape="circle"
-			v-model="checkboxValue">
-				
+			<uv-checkbox-group shape="circle" v-model="checkboxValue">
 				<uv-swipe-action>
-					<view
-					v-for="(item, index) in list.records"
-					:key="index">
+					<view v-for="(item, index) in list.records" :key="index">
 						<view style="margin-top: 20rpx;"></view>
-						<uv-swipe-action-item 
-						:options="options"
-						@click="delCart(item, index)">
+						<uv-swipe-action-item :options="options" @click="delCart(item, index)">
 							<view class="item">
 								<view class="checkbox">
-									<uv-checkbox
-										:name="item.id"
-										activeColor="#FA5A0A"
-										size="40rpx"
-										icon-size="35rpx"
-									></uv-checkbox>
+									<uv-checkbox :name="item.id" activeColor="#FA5A0A" size="40rpx"
+										icon-size="35rpx"></uv-checkbox>
 								</view>
-								
-								<image 
-								class="image"
-								:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" 
-								mode=""></image>
-								
+
+								<image class="image"
+									:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
+									mode=""></image>
+
 								<view class="info">
 									<view class="title">
-										<view class="">
-											{{ item.name }}
-										</view>
-										<view class="">
-											<uv-number-box v-model="item.num" 
-											@change="e => valChange(item, e)"></uv-number-box>
+										<view>{{ item.name }}</view>
+										<view>
+											<uv-number-box v-model="item.num"
+												@change="e => valChange(item, e)"></uv-number-box>
 										</view>
 									</view>
-									<view class="unit">
-										规格：{{ item.title }}
+									<!-- 规格下拉框 -->
+									<view class="unit" @click="toggleDropdown">
+										规格：{{ selectedOption || item.title }}
 										<uv-icon name="arrow-down"></uv-icon>
 									</view>
+
+
 									<view class="price">
 										￥<text>{{ item.price }}</text>元
 									</view>
@@ -53,18 +42,16 @@
 					</view>
 				</uv-swipe-action>
 			</uv-checkbox-group>
-			
+
 			<view class="action">
 				<view class="icon">
 					<image src="/static/image/cart/1.png" mode=""></image>
-					<view class="num">
-						{{ checkboxValue.length }}
-					</view>
+					<view class="num">{{ checkboxValue.length }}</view>
 				</view>
 				<view class="price">
 					<view class="count">
 						合计
-						<view class="">
+						<view>
 							￥<text>{{ totalPrice }}</text>
 						</view>
 					</view>
@@ -72,49 +59,61 @@
 						共{{ checkboxValue.length }}件，已享受更低优惠
 					</view>
 				</view>
-				<view class="btn" @click="goCleaning">
-					去结算
-				</view>
+				<view class="btn" @click="goCleaning">去结算</view>
 			</view>
 		</view>
 
+		<!-- 地址弹框 -->
+		<uv-popup ref="addressPopup" :round="30">
+			<addressList ref="addressList" height="60vh" @select="selectAddress" />
+		</uv-popup>
+
 		<tabber select="3" />
 	</view>
 </template>
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
+	import addressList from '@/components/address/addressList.vue'
 	export default {
 		components: {
 			tabber,
+			addressList,
 		},
+
 		data() {
 			return {
-				value : 0,
-				checkboxValue : [],
-				options: [
-					{
-						text: '删除',
-						style: {
-							backgroundColor: '#FA5A0A'
-						}
-					},
-				],
+				dropdownVisible: false,
+				value: 0,
+				checkboxValue: [],
+				options: [{
+					text: '删除',
+					style: {
+						backgroundColor: '#FA5A0A'
+					}
+				}],
+
 				queryParams: {
 					pageNo: 1,
-					pageSize: 10
+					pageSize: 10,
+				},
+				list: [],
+				addressTotal: 0,
+				address: {
+					name: '请选择联系人',
+					addressDetail: ''
 				},
-				list : [],
 			}
 		},
 		computed: {
-			totalPrice(){
+
+			totalPrice() {
 				if (!this.checkboxValue.length) {
 					return 0
 				}
 				let price = 0
 				this.list.records.forEach(n => {
-					if(this.checkboxValue.includes(n.id)){
+					if (this.checkboxValue.includes(n.id)) {
 						price += n.price * n.num
 					}
 				})
@@ -123,40 +122,140 @@
 		},
 		onShow() {
 			this.getData()
+			this.getAddressListA()
 		},
 		//滚动到屏幕底部
 		onReachBottom() {
-			if(this.queryParams.pageSize < this.list.total){
+			if (this.queryParams.pageSize < this.list.total) {
 				this.queryParams.pageSize += 10
 				this.getData()
 			}
 		},
 		methods: {
-			valChange(item, e){
+
+			toggleDropdown() {
+				this.dropdownVisible = !this.dropdownVisible
+			},
+			selectOption(option) {
+
+			},
+			// 去结算按钮
+			goCleaning() {
+				console.log("===");
+				this.$refs.addressPopup.open('bottom')
+
+				this.ordersPay()
+			},
+
+			// 多商品下单
+			ordersPay() {
+				let data = []
+				console.log(this.address, "this.address");
+
+				console.log(this.checkboxValue, "checkboxValue");
+				for (var i = 0; i < this.list.length; i++) {
+					if (this.checkboxValue.includes(this.list[i].id)) {
+						data.push({
+							id: this.list[i].id, //商品id
+							skuId: this.unit.id, //规格id
+							addressId: this.address.id, //地址id
+							sku: this.unit.title, //规格
+							num: this.list[i],
+						})
+					}
+				}
+
+				return
+
+
+				this.$api('orderCreate', {
+					req: JSON.stringify(data)
+				}, res => {
+					if (res.code == 200) {
+						let form = {
+							id: res.result.id
+						}
+						this.$api('orderPay', form, res => {
+							if (res.code == 200) {
+								uni.requestPayment({
+									provider: 'wxpay', // 服务提提供商
+									timeStamp: res.result.timeStamp, // 时间戳
+									nonceStr: res.result.nonceStr, // 随机字符串
+									package: res.result.packageValue,
+									signType: res.result.signType, // 签名算法
+									paySign: res.result.paySign, // 签名
+									success: function(res) {
+										// console.log('支付成功', res);
+										uni.redirectTo({
+											url: '/pages/index/order'
+										})
+
+									},
+									fail: function(err) {
+										console.log('支付失败', err);
+										// self.$refs.confirmationPopup.close()
+										uni.showToast({
+											icon: 'none',
+											title: "支付失败"
+										})
+									}
+								});
+							}
+						})
+					}
+				})
+			},
+
+			// 修改购物车里面商品的规格
+			unitChange(item, e) {
+
+				// TODO 查询商品规格
+				// this.$api('goodsOne', this.queryParams, res => {
+				// 	if (res.code == 200) {
+				// 		this.list = res.result
+				// 	}
+				// })
+			},
+
+			// 获取地址列表
+			getAddressListA() {
+				this.$refs.addressList.getAddressList().then(res => {
+					this.addressTotal = res.total
+					if (this.addressTotal != 0) {
+						this.address = res.records[0]
+					}
+				})
+			},
+
+			// 选择地址
+			selectAddress(e) {
+				this.address = e
+				this.$refs.addressPopup.close()
+
+			},
+
+			valChange(item, e) {
 				console.log(e.value);
 				this.$api('cartNum', {
-					id : item.id,
-					num : e.value,
+					id: item.id,
+					num: e.value,
 				})
 			},
-			// 去结算按钮
-			goCleaning(){
-				
-			},
+
 			// 购物车分页
-			getData(){
+			getData() {
 				this.$api('cartPage', this.queryParams, res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.list = res.result
 					}
 				})
 			},
 			// 删除购物车
-			delCart(item, index){
+			delCart(item, index) {
 				this.$api('cartDel', {
-					id : item.id
+					id: item.id
 				}, res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.getData()
 						uni.showToast({
 							title: '删除成功',
@@ -170,53 +269,63 @@
 
 <style scoped lang="scss">
 	.page {
-		/deep/ .uv-swipe-action{
+		/deep/ .uv-swipe-action {
 			width: 100%;
 		}
 	}
 
 	.user {
-		.item{
+		.item {
 			background-color: #fff;
 			display: flex;
 			padding: 30rpx;
-			.checkbox{
+
+			.checkbox {
 				display: flex;
 				justify-content: center;
 				align-items: center;
 			}
-			.image{
+
+			.image {
 				width: 200rpx;
 				height: 200rpx;
 				border-radius: 20rpx;
 			}
-			.info{
+
+			.info {
 				flex: 1;
-				.title{
+
+				.title {
 					display: flex;
 					padding: 10rpx 20rpx;
 					justify-content: space-between;
-					
+
 				}
-				.unit{
+
+				.unit {
 					font-size: 24rpx;
 					padding: 10rpx 20rpx;
 					color: #717171;
 					display: flex;
 					align-items: center;
 				}
-				.price{
+
+
+
+				.price {
 					color: $uni-color;
 					font-size: 28rpx;
 					padding: 10rpx 20rpx;
-					text{
+
+					text {
 						font-size: 36rpx;
 						font-weight: 900;
 					}
 				}
 			}
 		}
-		.action{
+
+		.action {
 			width: 700rpx;
 			position: fixed;
 			bottom: 220rpx;
@@ -229,16 +338,19 @@
 			justify-content: center;
 			align-items: center;
 			overflow: hidden;
-			.icon{
+
+			.icon {
 				position: relative;
 				width: 80rpx;
 				height: 80rpx;
 				margin: 0 20rpx;
-				image{
+
+				image {
 					width: 80rpx;
 					height: 80rpx;
 				}
-				.num{
+
+				.num {
 					position: absolute;
 					right: 10rpx;
 					top: 0rpx;
@@ -253,26 +365,31 @@
 					align-items: center;
 				}
 			}
-			.price{
-				.count{
+
+			.price {
+				.count {
 					display: flex;
 					font-size: 26rpx;
 					align-items: center;
-					view{
+
+					view {
 						color: $uni-color;
 						margin-left: 10rpx;
-						text{
+
+						text {
 							font-size: 32rpx;
 							font-weight: 900;
 						}
 					}
 				}
-				.text{
+
+				.text {
 					font-size: 20rpx;
 					color: #717171;
 				}
 			}
-			.btn{
+
+			.btn {
 				margin-left: auto;
 				background-color: $uni-color;
 				height: 100%;
@@ -284,4 +401,15 @@
 			}
 		}
 	}
+
+	.example-body {
+		padding: 12px;
+		background-color: #FFFFFF;
+	}
+
+	.result-box {
+		text-align: center;
+		padding: 20px 0px;
+		font-size: 16px;
+	}
 </style>

pages_order/components/product/submitUnitSelect.vue

@@ -4,7 +4,7 @@
 
 			<!-- 地址 -->
 			<view class="address" @click="openAddress">
-				<image src="../../static/address/selectIcon.png" mode=""></image>
+				<image src="/static/image/address/selectIcon.png" mode=""></image>
 				<view class="">
 					{{ address.name }}
 				</view>
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-	import addressList from '../address/addressList.vue'
+	import addressList from '../../../components/address/addressList.vue'
 	export default {
 		components: {
 			addressList,
@@ -162,21 +162,23 @@
 			},
 			orderPay() {
 
-				let data = {
-					id: this.detail.id, //商品id
-					skuId: this.unit.id, //规格id
-					addressId: this.address.id, //地址id
-					sku: this.unit.title, //规格
-					num: this.num,
-				}
+				let data = [
+					{
+						id: this.detail.id, //商品id
+						skuId: this.unit.id, //规格id
+						addressId: this.address.id, //地址id
+						sku: this.unit.title, //规格
+						num: this.num,
+					}
+				]
 
 
-				if (this.$utils.verificationAll(data, {
-						skuId: '请选择规格',
-						addressId: '请选择地址',
-					})) {
-					return
-				}
+				// if (this.$utils.verificationAll(data, {
+				// 		skuId: '请选择规格',
+				// 		addressId: '请选择地址',
+				// 	})) {
+				// 	return
+				// }
 
 				this.$api('orderCreate', {req:JSON.stringify(data)}, res => {
 					if (res.code == 200) {

pages_order/mine/address.vue

@@ -29,8 +29,8 @@
 </template>
 
 <script>
-	import redactAddress from '../components/address/redactAddress.vue'
-	import addressList from '../components/address/addressList.vue'
+	import redactAddress from '../../components/address/redactAddress.vue'
+	import addressList from '../../components/address/addressList.vue'
 
 	export default {
 		components: {