Quellcode durchsuchen

feat:订单详情 收货地址编辑

DaMowang vor 3 Jahren
Ursprung
Commit
fe262caaa3
4 geänderte Dateien mit 234 neuen und 189 gelöschten Zeilen
  1. 3 3
      src/app.scss
  2. 11 12
      src/pages/product/p_details.vue
  3. 24 124
      src/pages/to-pay-list/index.vue
  4. 196 50
      src/pages/xghc-addrress/userAddress.vue

+ 3 - 3
src/app.scss

@@ -28,9 +28,9 @@ view, text, div {word-break: break-all;color:#333;font-family: "SourceHanSansSC-
 /* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
     font-family: 'iconfont';  /* Project id 3748689 */
-    src: url('//at.alicdn.com/t/c/font_3748689_9lwy7tb2de.woff2?t=1668151644072') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3748689_9lwy7tb2de.woff?t=1668151644072') format('woff'),
-         url('//at.alicdn.com/t/c/font_3748689_9lwy7tb2de.ttf?t=1668151644072') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_3748689_7xs9pnbmm8.woff2?t=1668320176353') format('woff2'),
+         url('//at.alicdn.com/t/c/font_3748689_7xs9pnbmm8.woff?t=1668320176353') format('woff'),
+         url('//at.alicdn.com/t/c/font_3748689_7xs9pnbmm8.ttf?t=1668320176353') format('truetype');
   }
 .iconfont {
     font-family: "iconfont" !important;

+ 11 - 12
src/pages/product/p_details.vue

@@ -35,8 +35,7 @@
 		<view class="brief mar_t20">
 			<view class="brief_title flex_r flex_ac">产品简介</view>
 			<view class="brief_con">
-				<view v-html="detail.goods.goods_content"></view>
-				<!-- <jyfParser :html="detail.goods.goods_content" ref="jyf"></jyfParser> -->
+				<jyfParser :html="detail.goods.goods_content" ref="jyf"></jyfParser>
 				<!-- <image :lazy-load="true" style="width: 100%;display: block;" v-for="(item,index) in detail.goodsDetailesImage" :key="index" :src="item" mode="widthFix"></image> -->
 			</view>
 		</view>
@@ -120,18 +119,18 @@ import authorizeModule from '@/components/authorize-module/index'
 						icon: 'home',
 						text: '主页'
 					},
-					{
-						icon: 'cart',
-						text: '购物车',
-						info: 0
-					}
+					// {
+					// 	icon: 'cart',
+					// 	text: '购物车',
+					// 	info: 0
+					// }
 				],
 				buttonGroup: [ // 底部操作按钮
-					{
-						text: '加入购物车',
-						backgroundColor: '#ff0000',
-						color: '#fff'
-					},
+					// {
+					// 	text: '加入购物车',
+					// 	backgroundColor: '#ff0000',
+					// 	color: '#fff'
+					// },
 					{
 						text: '立即购买',
 						backgroundColor: '#ffa200',

+ 24 - 124
src/pages/to-pay-list/index.vue

@@ -93,6 +93,10 @@
 			<view class="pay_btn flex_r flex_ac flex_jc" @tap="payment">立即支付</view>
 		</view>
 		<!-- 底部操作栏-end -->
+
+		<!-- 收获地址弹窗 -->
+		<userAddress ref="userAddress" @addressConfirm="loadAddress" />
+
 	</view>
 </template>
 
@@ -101,9 +105,7 @@ let page = 1;
 let app=getApp();
 var appEv = app.$vm.$options;
 import { get, post, u_post } from "@/request/api.js";
-// let reqApi = new ReqApi();
-// var toPayOpre = new ToPayOpre();
-// import { ReqApi, ToPayOpre } from "../../utils/reqTools.js";
+import userAddress from "pages/xghc-addrress/userAddress"
 	export default {
 		data() {
 			return {
@@ -118,14 +120,21 @@ import { get, post, u_post } from "@/request/api.js";
 				obligation: 0, //待支付
 			};
 		},
+		components: {
+			userAddress,
+		},
 		onLoad(e){
 			this.Data = e
-			this.loadData(e)
-			this.userinfo = uni.getStorageSync('userinfo');
+			this.loadData(e);
+			this.loadAddress();
 
+			this.userinfo = uni.getStorageSync('userinfo');
 			// 1零售 2批发 3精品 4今日值买
 			this.modularName = e.type == 1 ? "零售专区" : e.type == 2 ? "批发专区" : e.type == 3 ? "精品专区" : "今日值买"
 		},
+		mounted () {
+			// this.$refs.popup.open('top');
+		},
 		methods:{
 			loadData(da){
 				post("goods/goodsDetail",da).then(res => {
@@ -142,6 +151,9 @@ import { get, post, u_post } from "@/request/api.js";
 						})
 					}
                 })
+			},
+			// 获取用户地址
+			loadAddress(){
 				post("user/addressList").then(res => {
                     if(res.code === 0){
 						let da = res.data.data;
@@ -152,137 +164,25 @@ import { get, post, u_post } from "@/request/api.js";
 							}else this.DefaultAddress = da[0]
 						}
 					}
-                })
-                // u_post("ShuZiTeaYW/shop/confirmOrder",this.Data).then(res => {
-                //     if(res.status == 200){
-                //         that.goodsInfo = res.goodsInfo
-                //         that.basicsInfo = res.basicsInfo
-                //         that.modularName = res.modularName
-                //     }
-                // })
-			},
-
-			// 获取用户地址
-			loadAddress:function(){
-				let that = this;
-                u_post("ShuZiTeaYW/shop/userDefaultAddress").then(res => {
-                    if(res.status == 200){
-							that.DefaultAddress = res.date
-                    }
                 })
 			},
 			chooseWXaddress() {
-				this.goto("/pages/xghc-addrress/userAddress");
-				// var that = this;
-				// uni.chooseAddress({
-				// 	success: function (res) {
-				// 		let default_address = {
-				// 			city: res.cityName,
-				// 			county: res.countyName,
-				// 			address: res.detailInfo,
-				// 			zipCode: res.postalCode,
-				// 			province: res.provinceName,
-				// 			mobile: res.telNumber,
-				// 			name: res.userName
-				// 		};
-				// 		that.DefaultAddress = default_address;
-				// 	},
-				// 	fail: function (res) {
-				// 		console.log(res);
-				// 		if (res.errMsg == "chooseAddress:fail auth deny" || res.errMsg == "chooseAddress:fail:auth denied") {
-				// 			that.flag = false;
-				// 		}
-				// 	}
-				// })
+				this.$refs.userAddress.open();
+				// this.goto("/pages/xghc-addrress/userAddress");
 			},
 			// 支付
 			payment:function(){
+				if(!this.DefaultAddress.id){
+					appEv.errTips('请选择地址')
+					return
+				}
 				post('goods/submitOrder',{
 					...this.Data,
 					address_id: this.DefaultAddress.id,
 				}).then(res => {
 
 				})
-				// let that = this;
-				// if(this.DefaultAddress == '' && this.Data.ojsType!=2){
-				// 	appEv.errTips('请选择地址')
-				// 	return false
-				// }
-				// let data = {
-				// 	goodsType:this.Data.goodsType,
-				// 	buyCount:this.Data.count,
-				// 	payType:this.Data.payType ? this.Data.payType : 1,
-				// 	ojsType:this.Data.ojsType ? this.Data.ojsType : ''
-				// }
-				// if(this.Data.goodsType == 6){
-				// 	data.shoppingCartId=this.Data.goodsId
-				// }else if(this.Data.goodsType == 4){
-				// 	data.shoppingCartId=this.Data.goodsPId
-				// }else{
-				// 	data.goodsId=this.Data.goodsId
-				// }
-				// if(this.Data.ojsType!=2){
-				// 	if(this.DefaultAddress.id && this.DefaultAddress.id != ''){
-				// 		data.addressId=this.DefaultAddress.id
-				// 	}else{
-				// 		data = {
-				// 			...data,
-				// 			province : this.DefaultAddress.province,
-				// 			city : this.DefaultAddress.city,
-				// 			county : this.DefaultAddress.county,
-				// 			address : this.DefaultAddress.address,
-				// 			name : this.DefaultAddress.name,
-				// 			mobile : this.DefaultAddress.mobile
-				// 		}
-				// 	}
-				// }
-				// uni.showModal({
-				//     title: '提示',
-				//     content: '是否确认支付',
-				//     success: function (res) {
-				//         if (res.confirm) {
-				// 			let info = null
-				// 			if(that.Data.goodsType == 6 || that.Data.goodsType == 4){
-				// 				info = reqApi.ShoppingCartBuy(data)
-				// 			}else{
-				// 				info = reqApi.placeOrders(data)
-				// 			}
-				//             if(info){
-				//             	info.then(res => {
-				//             		if(res.data.status == 200){
-				//             			if(res.data.payParam){
-				//             				toPayOpre.toPay(res.data.payParam, (res) => {
-				//             					if (!res) {
-				//             						// 支付成功
-				//             						uni.redirectTo({
-				//             							url: '/pages/szw-order-list/index'
-				//             						})
-				//             					} else {
-				//             						// 支付失败
-				//             						uni.redirectTo({
-				//             							url: '/pages/szw-order-list/index'
-				//             						})
-				//             					}
-				//             				});
-				//             			}else{
-				//             				appEv.errTips('支付成功')
-				// 							// 支付成功
-				// 							uni.redirectTo({
-				// 								url: '/pages/szw-order-list/index'
-				// 							})
-				//             			}
-				//             		}else{
-				//             			appEv.errTips(res.data.msg)
-				//             		}
-				//             	})
-				//             }
-				//         } else if (res.cancel) {
-				//             console.log('用户点击取消');
-				//         }
-				//     }
-				// });
-				
-			}
+			},
 		}
 	}
 </script>

+ 196 - 50
src/pages/xghc-addrress/userAddress.vue

@@ -1,53 +1,81 @@
 <template>
-	<view class="container">
-		<form @submit="formSubmit">
-			<view class='addAddress'>
-				<view class="pad30">
-					<view class='default acea-row row-middle borderRadius15'>
-						<uni-easyinput type="textarea" v-model="addressValue" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" @blur="identify()" />
-						<!-- <input v-model="addressValue" type="text" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" 
-						placeholder-class='placeholder' style="width:100%;" 
-						@blur="identify()"> -->
-					</view>
-				</view>
-				<view class="pad30 mt-22">
-					<view class='list borderRadius15'>
-						<view class='item acea-row row-between-wrapper'>
-							<view class='name'>姓名</view>
-							<input type='text' placeholder='请输入姓名' name='real_name' v-model="userAddress.real_name"
-								placeholder-class='placeholder' />
-						</view>
-						<view class='item acea-row row-between-wrapper'>
-							<view class='name'>联系电话</view>
-							<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
-								placeholder-class='placeholder' pattern="\d*" />
+	<uni-popup ref="popup" type="bottom">
+		<view class="container">
+			<form @submit="formSubmit" v-if="false">
+				<view class='addAddress'>
+					<view class="pad30">
+						<view class='default acea-row row-middle borderRadius15'>
+							<uni-easyinput type="textarea" v-model="addressValue" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" @blur="identify()" />
 						</view>
-						<view class='item acea-row row-between-wrapper'>
-							<view class='name'>所在地区</view>
-							<view class="address acea-row row-between">
-								<input type='text' placeholder='请填写具体地址' name='region' placeholder-class='placeholder'
-									v-model='userAddress.region' class="detail" />
+					</view>
+					<view class="pad30 mt-22">
+						<view class='list borderRadius15'>
+							<view class='item acea-row row-between-wrapper'>
+								<view class='name'>姓名</view>
+								<input type='text' placeholder='请输入姓名' name='real_name' v-model="userAddress.real_name"
+									placeholder-class='placeholder' />
 							</view>
-						</view>
-						<view class='item acea-row row-between-wrapper'>
-							<view class='name'>详细地址</view>
-							<view class="address">
-								<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
-									v-model='userAddress.detail' class="detail" />
+							<view class='item acea-row row-between-wrapper'>
+								<view class='name'>联系电话</view>
+								<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
+									placeholder-class='placeholder' pattern="\d*" />
 							</view>
-						</view>
-						<view class='item acea-row row-between-wrapper'>
-							<view class='name'>详细地址</view>
-							<view class="address">
-								<uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
+							<view class='item acea-row row-between-wrapper'>
+								<view class='name'>所在地区</view>
+								<view class="address acea-row row-between">
+									<input type='text' placeholder='请填写具体地址' name='region' placeholder-class='placeholder'
+										v-model='userAddress.region' class="detail" />
+								</view>
+							</view>
+							<view class='item acea-row row-between-wrapper'>
+								<view class='name'>详细地址</view>
+								<view class="address">
+									<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
+										v-model='userAddress.detail' class="detail" />
+								</view>
+							</view>
+							<view class='item acea-row row-between-wrapper'>
+								<view class='name'>详细地址</view>
+								<view class="address">
+									<uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
+								</view>
 							</view>
 						</view>
 					</view>
+					<button class='keepBnt bg-color' form-type="submit">立即保存</button>
 				</view>
-				<button class='keepBnt bg-color' form-type="submit">立即保存</button>
+			</form>
+
+			<view class="addbar">
+				<text class="iconfont sp">&#xe760;</text>
+				<text class="sp">添加地址</text>
 			</view>
-		</form>
-	</view>
+
+				<uni-swipe-action class="swipeAction">
+					<uni-swipe-action-item class="swipeAction_item" v-for="(i,s) in addressList" :key="s">
+						<view class="addressLi clearfix" @click="onSelect(i,s)">
+							<view class="addressLi_l">
+								<text v-if="i.status != 1" class="iconfont">&#xe623;</text>
+								<text v-else class="iconfont pitchOn">&#xe624;</text>
+							</view>
+							<view class="addressLi_r">
+								<view class="user">
+									<text class="name">{{i.name}}</text>
+									<text>{{i.mobile}}</text>
+								</view>
+								<view class="address">{{i.address}}</view>
+							</view>
+						</view>
+						<template v-slot:right>
+							<view class="btns clearfix">
+								<view class="btn edit"><text class="iconfont">&#xe600;</text></view>
+								<view class="btn del"><text class="iconfont">&#xe601;</text></view>
+							</view>
+						</template>
+					</uni-swipe-action-item>
+				</uni-swipe-action>
+		</view>
+	</uni-popup>
 </template>
 <script>
 import { get, post, u_post } from "@/request/api.js";
@@ -65,14 +93,14 @@ var appEv = app.$vm.$options;
 				}, //地址详情
 				addressValue:"",
 				is_default: 0, //是否设为默认地址
-				range: [{"value": 0,"text": "否"	},{"value": 1,"text": "是"}]
+				range: [{"value": 0,"text": "否"	},{"value": 1,"text": "是"}],
+
+				addressList: [],
 			}
 		},
-		components:{
-			
-		},
-		onLoad(){
-			
+		components:{},
+		created () {
+			this.loadAddress();
 		},
 		methods: {
 			identify(){
@@ -101,11 +129,46 @@ var appEv = app.$vm.$options;
                 	if (res.code === 0) {
 						appEv.errTips(res.msg);
 						setTimeout(() => {
-							uni.navigateBack();
+						// 	uni.navigateBack();
+							this.$emit('addressConfirm');
+							this.close();
 						}, 1500);
 					}
 				})
-				// this.$emit('addressConfirm',this.userAddress)
+			},
+			// 获取用户地址
+			loadAddress(){
+				post("user/addressList").then(res => {
+                    if(res.code === 0){
+						this.addressList = res.data.data;
+					}
+                })
+			},
+			onSelect(i,s){
+				this.addressList.forEach(e => {
+					e.status = "0";
+				});
+				this.addressList[s].status = "1";
+				this.editAddress();
+			},
+			editAddress(){
+				this.addressList.forEach((e,s) => {
+					post("user/editAddress",{
+						...e, is_default: e.status
+					}).then(res=>{
+						if(this.addressList.length == s+1){
+							this.$emit('addressConfirm');
+							this.close();
+						}
+					})
+				});
+			},
+
+			open() {
+				this.$refs.popup.open('top')
+			},
+			close() {
+				this.$refs.popup.close()
 			}
 		},
 	}
@@ -114,7 +177,7 @@ var appEv = app.$vm.$options;
 	.container{
 		background-color: #f5f5f5;
 		height: 100vh;
-		padding-top:30rpx;
+		padding:30rpx 0;
 	}
 	
 	.pad30 {
@@ -235,4 +298,87 @@ var appEv = app.$vm.$options;
 	.bg-color {
 		background-color: #dd524d;
 	}
+
+	.addbar{
+		background: #fff;
+		text-align: center;
+		margin-bottom: 50rpx;
+		padding: 36rpx 0;
+		.iconfont{
+			font-size: 46rpx;
+			margin-right: 20rpx;
+		}
+		.sp{
+			vertical-align: middle;
+		}
+	}
+
+	.swipeAction{
+		// padding: 20rpx 30rpx;
+		font-size: 28rpx;
+
+		.addressLi{
+			.addressLi_l{
+				width: 80rpx;
+				height: 80rpx;
+				display: flex;
+				// justify-content: center;
+				align-items: center;
+				.iconfont{
+					color: #666;
+					font-size: 38rpx;
+				}
+				.pitchOn{
+					color: #1989fa;
+				}
+			}
+			.addressLi_r{
+				width: calc(100% - 80rpx);
+			}
+			.addressLi_l,.addressLi_r{
+				float: left;
+			}
+			.user{
+				margin-bottom: 10rpx;
+			}
+			.name{
+				// font-weight: bold;
+				font-size: 32rpx;
+				margin-right: 10rpx;
+			}
+			.address{
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+
+		.swipeAction_item{
+			background: #fff;
+			margin-bottom: 20rpx;
+		}
+
+		.btns{
+			.btn{
+				float: left;
+				display:flex;
+				justify-content : center;
+				align-items : center; 
+				height: 100%;
+				padding: 0 30rpx;
+				color: #fff;
+				font-size: 36rpx;
+				
+			}
+			.edit{
+				background: rgba(25,137,250,0.5);
+			}
+			.del{
+				background: rgba(238,10,36,0.5);
+			}
+		}
+	}
+
+	::v-deep .uni-swipe_box{
+		padding: 20rpx 30rpx;
+	}
 </style>