Merge branch 'master' of ssh://gogs.zfire.top:2222/zfire-front/recycle-mobile

src/components/zj-dialog/zj-dialog-box.vue

@@ -0,0 +1,112 @@
+<template>
+	<u-popup 
+		round="10" 
+		:show="isShow" 
+		:closeOnClickOverlay="false">
+		<view class="dialog" :style="{'min-height': minHeight}">
+			<view class="dialog-header">
+				<view class="header">
+					<view class="btn" @tap="cancelDialog">取消</view>
+					<view class="title">{{title}}</view>
+					<view class="btn" @tap="confirmDialog">确定</view>
+				</view>
+				<view class="search" v-if="isSearch">
+					<u-search placeholder="请输入关键词" :showAction="false" v-model="keyword" @change="searchDialog"></u-search>
+				</view>
+			</view>
+			<view class="dialog-content">
+				<slot></slot>
+			</view>
+			<view class="dialog-footer">
+				<slot name="footer"></slot>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: '操作弹窗'
+			},
+			minHeight: {
+				type: String,
+				default: ''
+			},
+			isSearch: {
+				type: Boolean,
+				default: false
+			},
+		},
+		
+		data() {
+			return {
+				keyword: '',
+			}
+		},
+		
+		onLoad() {
+			
+		},
+		
+		methods: {
+			cancelDialog() {
+				this.keyword = '';
+				this.$emit('cancel');
+			},
+			
+			confirmDialog() {
+				this.keyword = '';
+				this.$emit('confirm');
+			},
+			
+			searchDialog() {
+				this.$emit('search', this.keyword);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.dialog {
+		background: #ffffff;
+		max-height: 88vh;
+		display: flex;
+		flex-direction: column;
+		border-radius: 20rpx 20rpx 0 0;
+		.dialog-header {
+			.header {
+				flex-shrink: 0;
+				height: 120rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 30rpx;
+				.btn {
+					font-size: 32rpx;
+					color: $theme-color;
+				}
+				.title {
+					font-size: 36rpx;
+					font-weight: 600;
+				}
+			}
+			.search {
+				padding: 0 30rpx 30rpx;
+			}
+		}
+		.dialog-content {
+			flex: 1;
+			overflow-y: scroll;
+		}
+		.dialog-footer {
+			padding: 0 30rpx;
+		}
+	}
+</style>

src/components/zj-dialog/zj-dialog-deliver.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="">
+    <u-modal
+    	:show="isShow"
+    	title="确认发货"
+      confirmColor="#01C30B"
+    	:showCancelButton="true"
+    	@cancel="cancelDialog"
+    	@confirm="confirmDialog">
+    	<view class="slot-content">
+        <view class="row">
+          <view class="label">发货方式</view>
+          <u-radio-group
+              v-model="type"
+              placement="row">
+          	<u-radio label="自送" activeColor="#01C30B" :name="1"></u-radio>
+          	<u-radio label="物流快递" activeColor="#01C30B" :name="2" style="margin-left: 40rpx;"></u-radio>
+          </u-radio-group>
+        </view>
+        <view class="row" v-show="type === 2">
+          <view class="label">物流公司</view>
+          <view class="value" @tap="isShowCompanyDialog = true">{{company ? company : '请选择'}}</view>
+        </view>
+        <view class="row" v-show="type === 2">
+          <view class="label">物流单号</view>
+          <u--input
+            border="bottom"
+            placeholder="请填写物流单号"
+            v-model="orderNo"
+            ></u--input>
+        </view>
+    	</view>
+    </u-modal>
+
+    <zjDialogPicker
+    	ref="otherWorkerDialog"
+    	:isShow="isShowCompanyDialog"
+    	:multiple="false"
+    	:styleType="2"
+    	:title="'物流公司'"
+    	:list="companyList"
+    	:keyName="'label'"
+    	:isSearch="true"
+    	@search="searchCompanyDialog"
+    	@cancel="isShowCompanyDialog = false"
+    	@confirm="confirmCompanyDialog">
+    </zjDialogPicker>
+  </view>
+
+</template>
+
+<script>
+	import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";
+
+	export default {
+    components: {
+    	zjDialogPicker
+    },
+
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			orderId: {
+				type: String,
+				default: ''
+			},
+		},
+
+		data() {
+			return {
+        type: 1, // 发货方式
+        company: '', // 物流公司
+        orderNo: '', // 物流单号
+
+        companyList: [
+          {label: '顺丰快递', value: 1},
+          {label: '申通快递', value: 1},
+        ],
+        isShowCompanyDialog: false,
+			}
+		},
+
+		methods: {
+      setValue(id) {
+
+      },
+
+      searchCompanyDialog() {
+
+      },
+
+      confirmCompanyDialog(e) {
+        this.company = this.companyList[e[0]].label;
+        this.isShowCompanyDialog = false;
+      },
+
+			cancelDialog() {
+				this.$emit('close');
+			},
+
+			confirmDialog() {
+        if(this.type === 2 && !this.company) return this.$toast('请选择物流公司');
+        if(this.type === 2 && !this.orderNo) return this.$toast('请填写物流单号');
+
+				let url = '';
+				if(this.detail.dispatchStatus == 'SQGP') {
+					url = '/order/dispatch/ack';
+				}else {
+					url = '/order/rece/ack';
+				}
+				this.$axios({
+					url,
+					method: 'POST',
+					params: {
+						id: this.orderId,
+					},
+					isLoading: 1
+				}).then(res => {
+					uni.$emit('refreshHome');
+					uni.$emit('refreshOrderDetail');
+					this.$successToast('接收成功');
+					this.cancelDialog();
+					this.$navPage(`/packageOrder/pages/orderDetail?id=${this.orderId}`);
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slot-content {
+		width: 100%;
+		.row {
+			display: flex;
+			align-items: center;
+			height: 60rpx;
+			margin-top: 20rpx;
+			.label {
+				color: $sec-font;
+				flex-shrink: 0;
+				margin-right: 30rpx;
+			}
+			.value {
+        flex: 1;
+        // color: $theme-color;
+      }
+      ::v-deep .u-input {
+        height: 40rpx !important;
+        padding: 12rpx 0 !important;
+      }
+		}
+	}
+</style>

src/components/zj-dialog/zj-dialog-picker.vue

@@ -0,0 +1,213 @@
+<template>
+	<zjDialogBox
+		:title="title"
+		:minHeight="'50vh'"
+		:isShow="isShow" 
+		:isSearch="isSearch"
+		@search="searchDialog"
+		@cancel="cancelDialog" 
+		@confirm="confirmDialog">
+		<view class="list2" v-if="styleType === 2">
+			<view 
+				class="item" 
+				v-for="(item, index) in list" 
+				:key="index" 
+				:class="activeIndex.includes(index) ? 'active':''"
+				@tap="clickItem(index)">
+				<view class="text" v-if="getType() == 'string'">{{item[keyName]}}</view>
+				<view class="text" v-else>
+					<text v-for="(it, idx) in keyName" :key="index">{{item[it]}}</text>
+				</view>
+				<text class="iconfont icon-gouxuan" v-if="activeIndex.includes(index)"></text>
+			</view>
+		</view>
+		<view class="list" v-else>
+			<view 
+				class="item" 
+				v-for="(item, index) in list" 
+				:key="index" 
+				:class="activeIndex.includes(index) ? 'active':''"
+				@tap="clickItem(index)">
+				{{item[keyName]}}
+			</view>
+		</view>
+	</zjDialogBox>
+</template>
+
+<script>
+	import zjDialogBox from "@/components/zj-dialog/zj-dialog-box.vue";
+
+	export default {
+		components: {
+		    zjDialogBox,
+		},
+		
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			list: {
+				type: Array,
+				default: []
+			},
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			keyName: {
+				type: [String, Array],
+				default: ''
+			},
+			styleType: {
+				type: Number,
+				default: 1
+			},
+			isSearch: {
+				type: Boolean,
+				default: false
+			}
+		},
+		
+		data() {
+			return {
+				activeIndex: [],
+			}
+		},
+		
+		mounted() {
+			
+		},
+		
+		methods: {
+			cancelDialog() {
+				this.$emit('cancel');
+			},
+			
+			confirmDialog() {
+				if(this.activeIndex.length < 1) return this.$toast('请选择');
+				this.$emit('confirm', this.activeIndex.sort());
+			},
+			
+			searchDialog(keyword) {
+				this.$emit('search', keyword);
+			},
+			
+			setValue(val) {
+				this.activeIndex = JSON.parse(JSON.stringify(val));
+			},
+			
+			clickItem(index) {
+				if(this.multiple) {
+					const idx = this.activeIndex.indexOf(index);
+					if (idx > -1) {
+						this.activeIndex.splice(idx, 1);
+					} else {
+						this.activeIndex.push(index);
+					}
+				}else {
+					this.activeIndex = [index];
+				}
+			},
+			
+			findElem(array, attr, val) {
+				for (var i = 0; i < array.length; i++) {
+					if (array[i][attr] == val) {
+						return i // 返回当前索引值
+					}
+				}
+				return -1
+			},
+			
+			getType() {
+				if(typeof(this.keyName) == 'string') {
+					return 'string';
+				}else {
+					return 'other'
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 10rpx 30rpx 30rpx;
+		.item {
+			width: calc((100% - 30rpx) / 2);
+			height: 76rpx;
+			text-align: center;
+			line-height: 76rpx;
+			border-radius: 76rpx;
+			background: #F4F5F9;
+			margin-right: 30rpx;
+			margin-bottom: 30rpx;
+			&:nth-child(2n) {
+				margin-right: 0;
+			}
+			&.disabled {
+				background: #eaeaea;
+				color: $sec-font;
+			}
+			&.active {
+				background: $theme-color;
+				color: #ffffff;
+			}
+		}
+	}
+	
+	.list2 {
+		background: #ffffff;
+		display: flex;
+		flex-direction: column;
+		padding: 0 30rpx;
+		overflow-y: scroll;
+		border-top: 1px solid #F3F4F8;
+		height: 70vh;
+		.item {
+			border-bottom: 1px solid #EAEAEA;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 30rpx 0;
+			position: relative;
+			&:last-child {
+				border: none;
+			}
+			.text {
+				font-size: 32rpx;
+				margin-right: 60rpx;
+				line-height: 40rpx;
+				text {
+					&:not(:first-child) {
+						font-size: 28rpx;
+						color: $sec-font;
+						margin-left: 12rpx;
+					}
+				}
+			}
+			.iconfont {
+				color: $theme-color;
+				font-size: 32rpx;
+				position: absolute;
+				right: 0;
+				top: 50%;
+				margin-top: -16rpx;
+			}
+			&.active {
+				.text {
+					color: $theme-color;
+					text {
+						color: $theme-color;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/zj-dialog/zj-dialog-remark.vue

@@ -0,0 +1,83 @@
+<template>
+	<zjDialogBox
+		:title="'修改备注'"
+		:minHeight="'50vh'"
+		:isShow="isShow" 
+		@cancel="cancelDialog" 
+		@confirm="confirmDialog">
+		<u--textarea
+			fixed
+			v-model="value" 
+			placeholder="请输入备注信息" 
+			border="none"
+			height="250">
+		</u--textarea>
+	</zjDialogBox>
+</template>
+
+<script>
+	import zjDialogBox from "@/components/zj-dialog/zj-dialog-box.vue";
+	
+	export default {
+		components: {
+		    zjDialogBox,
+		},
+		
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			orderId: {
+				type: String,
+				default: ''
+			},
+		},
+		
+		data() {
+			return {
+				value: '',
+			}
+		},
+		
+		methods: {
+			setValue(id) {
+				this.$axios({
+					url: '/order/detail',
+					method: 'POST',
+					params: {
+						id,
+					}
+				}).then(res => {
+					this.value = res.data.workerRemark;
+				})
+			},
+			
+			cancelDialog() {
+				this.value = '';
+				this.$emit('close');
+			},
+			
+			confirmDialog() {
+				if(!this.value) return this.$toast('请填写备注信息');
+				
+				this.$axios({
+					url: '/order/remark',
+					method: 'POST',
+					params: {
+						id: this.orderId,
+						workerRemark: this.value,
+					}
+				}).then(res => {
+					uni.$emit('refreshHome');
+					this.$successToast('修改成功');
+					this.cancelDialog();
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

src/components/zj-dialog/zj-dialog-verification.vue

@@ -0,0 +1,243 @@
+<template>
+	<u-popup
+		mode="center" 
+		:round="10" 
+		:closeable="true" 
+		:show="isShow" 
+		@close="closeDialog">
+		<view class="code-dialog">
+			<view class="title">请完成安全验证</view>
+			<view class="pt">
+				<view class="pt-verification-box">
+					<view class="pt-verification-images">
+						<view class="iconfont refresh" @click="refresh">&#xe64c;</view>
+						<image mode="widthFix" :src="'data:image/jpeg;base64,'+bgImg" class="bg-img"></image>
+						<image :src="'data:image/jpeg;base64,'+maskImg" class="drag-img" mode="widthFix" :style="{ left: dragWidth + 'px', top: top + 'px'}"></image>
+						<view class="mask"></view>
+					</view>
+					<view class="pt-dragbar">
+						<view :class="['pt-drag-area',{fail: isFail,success: isSuccess}]" :style="{ width: dragWidth + 'px'}" v-if="dragWidth"></view>
+						<movable-area class="pt-dragbar-area">
+							<movable-view
+								:class="['pt-dragbar-view',{active: dragWidth > 2,fail: isFail,success: isSuccess}]"
+								:direction="direction"
+								@change="dragStart"
+								@touchend="dragEnd"
+								:damping="200"
+								:x="x"
+								:animation="false"
+								:disabled="disabled"
+								:data-dragWidth="dragWidth">
+								<text class="iconfont">
+									<block v-if="isSuccess">&#xe687;</block>
+									<block v-else-if="isFail">&#xe65c;</block>
+									<block v-else>&#xe62a;</block>
+								</text>
+							</movable-view>
+							<text v-if="dragWidth==0" class="tips">{{tips}}</text>
+						</movable-area>
+					</view>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			isShow: {
+				type: Boolean,
+				default: false
+			},
+			// 背景大图
+			bgImg: {
+				type: String,
+				default: ''
+			},
+			// 块状小图
+			maskImg: {
+				type: String,
+				default: ''
+			},
+			// 坑位的top值
+			top: {
+				type: Number,
+				default: 0
+			},
+			// 滑块滑动的方向
+			direction: {
+				type: String,
+				default: 'horizontal'
+			},
+			// 判断是否成功
+			isSuccess: {
+				type: Boolean,
+				default: false,
+			},
+			// 判断是否失败
+			isFail: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				tips: '向右拖动滑块填充拼图',
+				disabled: false,
+				dragWidth: 0,
+				x: 0
+			};
+		},
+		methods: {
+			closeDialog() {
+				this.$emit('close');
+			},
+			
+			// 开始滑动
+			dragStart(e){
+				this.dragWidth = e.detail.x
+			},
+			
+			// 停止滑动
+			dragEnd(e){
+				this.x = this.dragWidth;
+				this.$emit('finish', this.dragWidth);
+			},
+			
+			refresh(){
+				console.log(1);
+				this.dragWidth = 0;
+				this.isFail = false;
+				this.isSuccess = false;
+				this.x = 0;
+				this.disabled = false;
+				this.$emit('refresh');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@font-face {
+	  font-family: 'iconfont';  /* project id 2047533 */
+	  src: url('https://at.alicdn.com/t/font_2047533_o8axbabfs3.ttf') format('truetype')
+	}
+	.iconfont {
+	  font-family: iconfont !important;
+	  font-size: 16px;
+	  font-style: normal;
+	  -webkit-font-smoothing: antialiased;
+	  -moz-osx-font-smoothing: grayscale;
+	}
+	.code-dialog {
+		padding: 20px;
+		border-radius: 10rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.title {
+			font-size: 28rpx;
+			color: #333333;
+			width: 100%;
+			text-align: left;
+			margin-bottom: 10px;
+		}
+	}
+	.pt{
+		width: 300px;
+		margin: 0 auto;
+		&-verification-images{
+			position: relative;
+			.refresh{
+				position: absolute;
+				right: 20rpx;
+				top: 20rpx;
+				z-index: 10;
+				color: #FFF;
+				font-weight: bold;
+			}
+			.bg-img{
+				width: 100%;
+				vertical-align: top;
+			}
+			.drag-img{
+				position: absolute;
+				width: 112rpx;
+				height: 91rpx;
+				top: 0;
+				left: 0;
+				z-index: 1;
+			}
+			.mask {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: rgba($color: #000000, $alpha: .2);
+			}
+		}
+		&-dragbar{
+			position: relative;
+			height: 80rpx;
+			background-color: #F7F7F7;
+			border: solid 2rpx #EEE;
+			margin-top: 20rpx;
+			.pt-drag-area{
+				position: absolute;
+				height: 80rpx;
+				border: solid 2rpx $uni-color-primary;
+				background-color: #D1E9F1;
+				top: -2rpx;
+				&.fail{
+					border-color: $uni-color-error;
+					background-color: #ffdbdb;
+				}
+				&.success{
+					border-color: $uni-color-success;
+					background-color: #d7ffe1;
+				}
+			}
+			&-area{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+				.tips{
+					font-size: 24rpx;
+					color: #999;
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%,-50%);
+				}
+			}
+			&-view{
+				width: 80rpx;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border: solid 2rpx #EEE;
+				background-color: #FFF;
+				top: -2rpx;
+				left: 0;
+				&.active{
+					background-color: $uni-color-primary;
+					border-color: $uni-color-primary;
+					color: #FFF;
+				}
+				&.fail{
+					background-color: $uni-color-error;
+					border-color: $uni-color-error;
+				}
+				&.success{
+					border-color: $uni-color-success;
+					background-color: #00a029;
+				}
+			}
+		}
+	}
+</style>

src/components/zj/custom.vue

@@ -1,100 +0,0 @@
-<template>
-	<view class="navigation" >
-		<view class="me-container" :class="bgColor">
-			<view class="me-left flex_ac">
-				<!-- <view v-if="isBack" @tap="toBack" class="iconfont icon-back"></view> -->
-				<!-- <image v-if="isBack" @tap="toBack" src="@/static/icon/back.png"></image> -->
-        <u-icon name="arrow-left" v-if="isBack" @tap="toBack"></u-icon>
-				<slot name="left"></slot>
-			</view>
-			<view class="me-content">
-				<slot name="content"></slot>
-			</view>
-			<view class="me-right">
-				<slot name="right"></slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props:{
-			isBack:{
-				type:Boolean,
-				default:true
-			},
-			bgColor:{
-				type:String,
-				default:'bg-white'
-			}
-		},
-		computed:{
-
-		},
-		data() {
-			return {
-				StatusBar:this.StatusBar,
-				CustomBar:this.CustomBar
-			};
-		},
-		methods:{
-			toBack(){
-				uni.navigateBack({
-					delta:1
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	cover-view{
-		box-sizing: border-box;
-	}
-.navigation{
-  height: 88rpx;
-	position: relative;
-	.bg-none {
-		background: none;
-	}
-	.bg-white{
-		background: #FFFFFF;
-	}
-	.bg-tran{
-		background: transparent;
-	}
-	.bg-them{
-		background: #fb5152;
-	}
-	.bg-linear {
-		background: linear-gradient(-45deg, #6da7ff 0%, #7fdaff 100%);
-	}
-	.me-container{
-		position: fixed;
-		width: 100%;
-		top: 0;
-		z-index: 1024;
-		// box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
-		// padding: 0 30rpx;
-    height: 88rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.me-content{
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-		}
-		.me-left{
-			image {
-				width: 32rpx;
-				height: 32rpx;
-				display: block;
-				margin-left: 30rpx;
-			}
-		}
-
-	}
-}
-</style>

src/main.js

@@ -52,8 +52,10 @@ Vue.prototype.$api = api
 
 import custom from '@/components/custom.vue';
 import Loading from '@/components/Loading.vue';
+import zjPageLayout from "@/components/zj-container/zj-page-layout.vue"
 Vue.component('custom', custom);
 Vue.component('Loading', Loading);
+Vue.component('zjPageLayout', zjPageLayout);
 
 import {
   getUserInfo

src/pages.json

@@ -102,6 +102,18 @@
       }
     },
     {
+      "path": "pages/mine/myIssue/list",
+      "style": {
+        "navigationBarTitleText": "我发布的"
+      }
+    },
+    {
+      "path": "pages/mine/myIssue/detail",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
+    },
+    {
       "path": "pages/goods/list",
       "style": {
         "navigationBarTitleText": "商品列表"
@@ -137,7 +149,7 @@
     // }
   },
   "easycom": {
-    "zj-(.*)": "@/components/zj-container/zj-$1.vue",
+    // "zj-(.*)": "@/components/zj-container/zj-$1.vue",
     "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   },
   "globalStyle": {

src/pages/mine/index.vue

@@ -31,10 +31,10 @@
         <view class="stats-container card">
           <view class="top">
             <view class="left">我发布的</view>
-            <view class="right">全部<text class="iconfont icon-jinru"></text></view>
+            <view class="right" @tap="$navPage(`/pages/mine/myIssue/list`)">全部<text class="iconfont icon-jinru"></text></view>
           </view>
           <view class="stats">
-            <view class="item" v-for="(item, index) in issueStats" :key="index">
+            <view class="item" v-for="(item, index) in issueStats" :key="index" @tap="$navPage(`/pages/mine/myIssue/list`)">
               <view class="icon">
                 <text class="iconfont" :class="item.icon"></text>
                 <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>

src/pages/mine/myBuy/list.vue

@@ -24,7 +24,7 @@
       </view>
     </template>
 
-    <view class="list-container">
+    <view class="common-order-list">
       <view class="item" @tap="$navPage(`/pages/mine/myBuy/detail`)">
         <view class="top">
           <image src="@/static/common/logo.png"></image>
@@ -44,7 +44,7 @@
         </view>
         <view class="total">订单总金额<text>¥1200.00</text></view>
         <view class="bottom">
-          <view class="left-location">天河区棠下</view>
+          <view class="left-location"><text class="iconfont icon-dingwei"></text>天河区棠下</view>
           <view class="right-btn">
             <u-button text="取消订单" shape="circle"></u-button>
           </view>
@@ -124,93 +124,5 @@
   background: #ffffff;
 }
 
-.list-container {
-  .item {
-    margin-top: 30rpx;
-    background: #ffffff;
-    padding: 20rpx 30rpx;
-    .top {
-      display: flex;
-      align-items: center;
-      image {
-        width: 88rpx;
-        height: 88rpx;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-      .user {
-        margin-left: 20rpx;
-        flex: 1;
-        .name {
 
-        }
-        .time {
-          color: $sec-font;
-          font-size: 24rpx;
-          margin-top: 8rpx;
-        }
-      }
-      .status {
-        color: $assist-color;
-      }
-    }
-    .goods {
-      display: flex;
-      padding: 30rpx 0;
-      image {
-        width: 120rpx;
-        height: 120rpx;
-      }
-      .main {
-        flex: 1;
-        margin-left: 20rpx;
-        .name {
-          font-size: 32rpx;
-        }
-        .des {
-          margin-top: 12rpx;
-          font-size: 28rpx;
-          color: $reg-font;
-        }
-        .price {
-          margin-top: 12rpx;
-        	text {
-        		color: $assist-color;
-        		font-weight: 500;
-        		font-size: 32rpx;
-            margin-right: 12rpx;
-        	}
-        }
-      }
-    }
-    .total {
-      border-top: 1px solid #eaeaea;
-      height: 80rpx;
-      display: flex;
-      align-items: center;
-      justify-content: end;
-      font-size: 28rpx;
-      text {
-        margin-left: 12rpx;
-        color: $assist-color;
-      }
-    }
-    .bottom {
-      border-top: 1px solid #eaeaea;
-      padding-top: 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .left-location {
-        font-size: 24rpx;
-        color: $sec-font;
-      }
-      .right-btn {
-        .u-button {
-          height: 60rpx;
-        }
-      }
-    }
-  }
-}
 </style>

src/pages/mine/myIssue/detail.vue

@@ -0,0 +1,175 @@
+<template>
+  <zj-page-layout
+  	:hasFooter="true"
+  	:isScroll="true"
+  	:refresherTriggered="refresherTriggered"
+  	@refresherrefresh="refresherrefresh">
+
+    <view class="address-container">
+      <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
+      <view class="hasdata">
+        <view class="name">莫先生<text>13686123123</text></view>
+        <view class="address ellipsis-2">广东省广州市</view>
+      </view>
+    </view>
+
+    <view class="goods-container">
+      <view class="title">商品信息</view>
+      <view class="goods">
+        <image src="@/static/user/other_book.png"></image>
+        <view class="main">
+          <view class="name">商品名称</view>
+          <view class="des">商品描述</view>
+          <view class="price"><text>¥18.00</text>x2</view>
+        </view>
+      </view>
+      <view class="total">订单总金额<text>¥1200.00</text></view>
+    </view>
+
+    <view class="order-container">
+      <view class="title">订单信息</view>
+      <view class="row">订单编号：1234321232</view>
+      <view class="row">创建时间：1234321232</view>
+      <view class="row">付款时间：1234321232</view>
+      <view class="row">支付方式：1234321232</view>
+      <view class="row">支付单号：1234321232</view>
+      <view class="row">发货时间：1234321232</view>
+      <view class="row">收货时间：1234321232</view>
+    </view>
+
+    <template slot="footer">
+      <view class="bottom-container">
+        <u-button text="取消订单" shape="circle"></u-button>
+      </view>
+    </template>
+
+  </zj-page-layout>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.address-container {
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  height: 150rpx;
+  padding: 0 20rpx;
+  margin-top: 30rpx;
+  .icon {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 50%;
+    background: $theme-color;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-right: 20rpx;
+    .iconfont {
+      font-size: 36rpx;
+      color: #ffffff;
+    }
+  }
+  .hasdata {
+    .name {
+      font-size: 32rpx;
+      color: #333333;
+      text {
+        color: #999999;
+        font-size: 28rpx;
+        margin-left: 16rpx;
+      }
+    }
+    .address {
+      font-size: 28rpx;
+      color: #666666;
+      line-height: 34rpx;
+      margin-top: 10rpx;
+    }
+  }
+}
+
+.goods-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx 30rpx 0;
+  .title {
+    font-weight: 500;
+  }
+  .goods {
+    display: flex;
+    padding: 30rpx 0;
+    image {
+      width: 120rpx;
+      height: 120rpx;
+    }
+    .main {
+      flex: 1;
+      margin-left: 20rpx;
+      .name {
+        font-size: 32rpx;
+      }
+      .des {
+        margin-top: 12rpx;
+        font-size: 28rpx;
+        color: $reg-font;
+      }
+      .price {
+        margin-top: 12rpx;
+      	text {
+      		color: $assist-color;
+      		font-weight: 500;
+      		font-size: 32rpx;
+          margin-right: 12rpx;
+      	}
+      }
+    }
+  }
+  .total {
+    border-top: 1px solid #eaeaea;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    font-size: 28rpx;
+    text {
+      margin-left: 12rpx;
+      color: $assist-color;
+    }
+  }
+}
+
+.order-container {
+  background: #ffffff;
+  margin-top: 30rpx;
+  padding: 30rpx;
+  .title {
+    font-weight: 500;
+    margin-bottom: 20rpx;
+  }
+  .row {
+    margin-top: 12rpx;
+    font-size: 28rpx;
+    text {
+      color: $assist-color;
+    }
+  }
+}
+
+.bottom-container {
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .u-button {
+    width: auto;
+    height: 60rpx;
+    margin: 0;
+    margin-left: 20rpx;
+  }
+}
+
+</style>

src/pages/mine/myIssue/list.vue

@@ -0,0 +1,145 @@
+<template>
+  <view>
+    <zj-page-layout
+      :hasFooter="false"
+      :isScroll="true"
+      :refresherTriggered="refresherTriggered"
+      @refresherrefresh="refresherrefresh"
+      @scrolltolower="scrolltolower">
+      <template slot="header">
+        <view class="header-container">
+          <u-tabs
+            :scrollable="false"
+            :list="tabList"
+            :current="curTab"
+            @click="changeTab"
+            lineColor="#01C30B"
+            :activeStyle="{
+              color: '#01C30B'
+            }"
+            :inactiveStyle="{
+              color: '#666666'
+            }"
+            itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;">
+          </u-tabs>
+        </view>
+      </template>
+
+      <view class="common-order-list">
+        <view class="item" @tap="$navPage(`/pages/mine/myBuy/detail`)">
+          <view class="top">
+            <image src="@/static/common/logo.png"></image>
+            <view class="user">
+              <view class="name">李海</view>
+              <view class="time">21小时前发布</view>
+            </view>
+            <view class="status">待付款</view>
+          </view>
+          <view class="goods">
+            <image src="@/static/user/other_book.png"></image>
+            <view class="main">
+              <view class="name">商品名称</view>
+              <view class="des">商品描述</view>
+              <view class="price"><text>¥18.00</text>x2</view>
+            </view>
+          </view>
+          <view class="bottom">
+            <view class="left-location"><text class="iconfont icon-dingwei"></text>天河区棠下</view>
+            <view class="right-btn" @tap.stop>
+              <u-button text="确认发货" shape="circle" @click="openDeliver()"></u-button>
+            </view>
+          </view>
+        </view>
+      </view>
+
+    </zj-page-layout>
+
+    <zj-dialog-deliver
+      ref="deliverDialog"
+      :isShow="isShowDeliverDialog"
+      @close="isShowDeliverDialog = false">
+    </zj-dialog-deliver>
+  </view>
+</template>
+
+<script>
+	import zjDialogDeliver from '@/components/zj-dialog/zj-dialog-deliver.vue';
+
+  export default {
+    components: {
+      zjDialogDeliver
+    },
+
+    data() {
+      return {
+        imgUrl: this.$imageUrl,
+        tabList: [
+          {name: '我发布的', value: 1},
+          {name: '已卖出', value: 2},
+          {name: '已下架', value: 3},
+        ],
+        curTab: 0,
+        dataList: [],
+        pageNum: 1,
+        refresherTriggered: false,
+
+        isShowDeliverDialog: false,
+      }
+    },
+
+    async onLoad() {
+      // await this.getList()
+    },
+
+    methods: {
+      //获取列表数据
+      async getList() {
+        this.$api.post('/xxx/xxxlist', {
+          pageNum: this.pageNum,
+          pageSize: 10,
+        }).then(res => {
+          this.loadStatus = 0;
+          let list = res.data.records;
+          if(list.length < 10){
+          	this.loadStatus = 2;
+          }
+          this.dataList = this.dataList.concat(list);
+        }).catch(() => {
+					this.loadStatus = 2;
+				}).finally(res => {
+					this.refresherTriggered = false;
+				})
+      },
+
+      // 滚动到底部
+      scrolltolower(e) {
+      	if (this.loadStatus === 0) {
+      		this.pageNum++;
+      		this.getList();
+      	}
+      },
+
+      // 触发下拉刷新
+      refresherrefresh(e) {
+      	this.refresherTriggered = true;
+      	this.dataList = [];
+      	this.pageNum = 1;
+      	this.getList();
+      },
+
+      openDeliver() {
+        this.$refs.deliverDialog.setValue();
+        this.isShowDeliverDialog = true;
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  background: #ffffff;
+}
+
+
+</style>

src/styles/common.scss

@@ -98,8 +98,13 @@
           align-items: center;
           margin-left: 16rpx;
           .iconfont {
-            font-size: 28rpx;
+            font-size: 24rpx;
             color: $sec-font;
+            display: flex;
+            align-items: center;
+            .iconfont {
+              margin-right: 4rpx;
+            }
           }
           .text {
             font-size: 24rpx;
@@ -111,3 +116,100 @@
     }
   }
 }
+
+.common-order-list {
+  .item {
+    margin-top: 30rpx;
+    background: #ffffff;
+    padding: 20rpx 30rpx;
+    .top {
+      display: flex;
+      image {
+        width: 88rpx;
+        height: 88rpx;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .user {
+        margin-left: 20rpx;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .name {
+
+        }
+        .time {
+          color: $sec-font;
+          font-size: 24rpx;
+          margin-top: 8rpx;
+        }
+      }
+      .status {
+        color: $assist-color;
+      }
+    }
+    .goods {
+      display: flex;
+      padding: 30rpx 0;
+      image {
+        width: 120rpx;
+        height: 120rpx;
+      }
+      .main {
+        flex: 1;
+        margin-left: 20rpx;
+        .name {
+          font-size: 32rpx;
+        }
+        .des {
+          margin-top: 12rpx;
+          font-size: 28rpx;
+          color: $reg-font;
+        }
+        .price {
+          margin-top: 12rpx;
+        	text {
+        		color: $assist-color;
+        		font-weight: 500;
+        		font-size: 32rpx;
+            margin-right: 12rpx;
+        	}
+        }
+      }
+    }
+    .total {
+      border-top: 1px solid #eaeaea;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      font-size: 28rpx;
+      text {
+        margin-left: 12rpx;
+        color: $assist-color;
+      }
+    }
+    .bottom {
+      border-top: 1px solid #eaeaea;
+      padding-top: 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .left-location {
+        font-size: 24rpx;
+        color: $sec-font;
+        display: flex;
+        align-items: center;
+        .iconfont {
+          margin-right: 4rpx;
+        }
+      }
+      .right-btn {
+        .u-button {
+          height: 60rpx;
+        }
+      }
+    }
+  }
+}