update

mobile-code/src/components/app-footer.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="deFooter" class="de-footer">
         <div class="btn-list-wrap">
-            <div class="btn_list" v-for="(item, index) in btnData" :key="index" @click="$util.jumpMenuFn(item)" v-show="item.judge()">
+            <div class="btn_list" v-for="(item, index) in btnData" :key="index" @click="$util.pageTo(item)" v-show="item.judge()">
                 <div class="btn_blo active" v-if="index == activeIndex">
                     <div class="btn-img-wrap">
                         <img class="btn_img" :src="constant.imgUrl + item.activeImg" alt mode="widthFix" />

mobile-code/src/components/module/app-close.vue

@@ -0,0 +1,29 @@
+<template>
+    <!-- 公共按钮 -->
+	<div class="app-close" @click="close">
+		<i class="iconfont iconclose"></i>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'app-close',
+	props: {},
+	methods: {
+		close() {
+			this.$emit('close')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scope>
+.app-close {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: $fontColor3;
+	background-color: #fff;
+	padding: 20px;
+}
+</style>

mobile-code/src/components/plugin/number-box.vue

@@ -0,0 +1,205 @@
+<template>
+	<view class="tui-numberbox-class tui-numberbox">
+		<view class="tui-numbox-icon tui-icon-reduce " :class="[disabled || min>=value?'tui-disabled':'']" @tap="reduce"
+		 :style="{color:iconColor,fontSize:iconSize+'rpx'}"></view>
+		<input type="number" v-model="inputValue" :disabled="disabled" @blur="blur" class="tui-num-input" :style="{color:color,fontSize:size+'rpx',background:bgcolor,height:height+'rpx',width:width+'rpx'}" />
+		<view class="tui-numbox-icon tui-icon-plus" :class="[disabled || value>=max?'tui-disabled':'']" @tap="plus" :style="{color:iconColor,fontSize:iconSize+'rpx'}"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiNumberbox',
+	props: {
+		value: {
+			type: Number,
+			default: 1
+		},
+		// 最小值
+		min: {
+			type: Number,
+			default: 1
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 99
+		},
+		// 迈步大小 1 1.1 10...
+		step: {
+			type: Number,
+			default: 1
+		},
+		// 是否禁用操作
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 加减图标大小 rpx
+		iconSize: {
+			type: Number,
+			default: 26
+		},
+		iconColor: {
+			type: String,
+			default: '#666666'
+		},
+		// input 高度
+		height: {
+			type: Number,
+			default: 42
+		},
+		// input 宽度
+		width: {
+			type: Number,
+			default: 80
+		},
+		size: {
+			type: Number,
+			default: 28
+		},
+		// input 背景颜色
+		bgcolor: {
+			type: String,
+			default: '#F5F5F5'
+		},
+		// input 字体颜色
+		color: {
+			type: String,
+			default: '#333'
+		},
+		// 索引值，列表中使用
+		index: {
+			type: [Number, String],
+			default: 0
+		},
+		// 自定义参数
+		custom: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	created() {
+		this.inputValue = +this.value
+	},
+	data() {
+		return {
+			inputValue: 0
+		}
+	},
+	watch: {
+		value(val) {
+			this.inputValue = +val
+		}
+	},
+	methods: {
+		getScale() {
+			let scale = 1
+			// 浮点型
+			if (!Number.isInteger(this.step)) {
+				scale = Math.pow(10, (this.step + '').split('.')[1].length)
+			}
+			return scale
+		},
+		calcNum: function(type) {
+			if (this.disabled) {
+				return
+			}
+			const scale = this.getScale()
+			let num = this.value * scale
+			let step = this.step * scale
+			if (type === 'reduce') {
+				num -= step
+			} else if (type === 'plus') {
+				num += step
+			}
+			let value = num / scale
+			if (type === 'plus' && value < this.min) {
+				value = this.min
+			} else if (type === 'reduce' && value > this.max) {
+				value = this.max
+			}
+			if (value < this.min || value > this.max) {
+				return
+			}
+			this.handleChange(value, type)
+		},
+		plus: function() {
+			this.calcNum('plus')
+		},
+		reduce: function() {
+			this.calcNum('reduce')
+		},
+		blur: function(e) {
+			let value = e.detail.value
+			if (value) {
+				if (~value.indexOf('.') && Number.isInteger(this.step)) {
+					value = value.split('.')[0]
+				}
+				value = Number(value)
+				if (value > this.max) {
+					value = this.max
+				} else if (value < this.min) {
+					value = this.min
+				}
+			} else {
+				value = this.min
+			}
+			if (value == this.value && value != this.inputValue) {
+				this.inputValue = value
+			}
+			this.handleChange(value, 'blur')
+		},
+		handleChange(value, type) {
+			if (this.disabled) return
+			this.$emit('change', {
+				value: value,
+				type: type,
+				index: this.index,
+				custom: this.custom
+			})
+		}
+	}
+}
+</script>
+
+<style>
+	@font-face {
+		font-family: 'numberbox';
+		src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABtwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAciBpnRUdERUYAAARUAAAAHgAAAB4AKQALT1MvMgAAAZwAAABDAAAAVjxzSINjbWFwAAAB9AAAAEYAAAFK5zLpOGdhc3AAAARMAAAACAAAAAj//wADZ2x5ZgAAAkgAAACHAAAAnIfIEjxoZWFkAAABMAAAAC8AAAA2FZWEOWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAARAAAAEgwAAAFsb2NhAAACPAAAAAwAAAAMADAATm1heHAAAAF8AAAAHwAAACABEAAobmFtZQAAAtAAAAFJAAACiCnmEVVwb3N0AAAEHAAAAC0AAABV/+8iFXjaY2BkYGAA4gVmC5Tj+W2+MnCzMIDATWsFOQT9v5GFgbkeyOVgYAKJAgDrogf+AHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGWQYQDRDAxMQMwFhAwM/8F8BgALpAE5AHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs9Yn01kbvjfwBDD3MDQABRmBMkBAOXpDHEAeNpjYYAAFghmZGAAAACdAA4AAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiesT6b+P8/AwOElvwnWQxVDwSMbAxwDiMTkGBiQAWMDMMeAABRZwszAAAAAAAAAAAAAAAwAE542iWKQQrCMBBF5xNpd0pQ7EIoTEnahSCTUNqdWz2A9TrieXKeXCc1qcPn/zfzh0BYv2pVH7oQgbvqdG5Yt/DTrNlPYz+wHvuuqhFSME4sFshTgKUsKfhH5lg8BSul3i5bS3mQdd0RIh2IjnvUrkXDd8zuhuFt86tY9fonIsSYgsXpB+cCGosAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMwiWZmJQJRXVQoigTgjMd9QGIsgAFDsEBsAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAEAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0TWsFORgNADPBBE4AAA==) format('woff');
+		font-weight: normal;
+		font-style: normal;
+	}
+
+	.tui-numbox-icon {
+		font-family: "numberbox" !important;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		padding: 10rpx;
+	}
+
+	.tui-icon-reduce:before {
+		content: "\e691";
+	}
+
+	.tui-icon-plus:before {
+		content: "\e605";
+	}
+
+	.tui-numberbox {
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.tui-num-input {
+		text-align: center;
+		margin: 0 12rpx;
+		font-weight: 400;
+	}
+
+	.tui-disabled {
+		color: #ededed !important;
+	}
+</style>

mobile-code/src/components/plugin/tabs.vue

@@ -0,0 +1,226 @@
+<template>
+	<view class="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:bgColor,top:isFixed?top+'px':'auto'}">
+		<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
+			<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{color:currentTab==index?selectedColor:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">{{item.name}}</view>
+		</view>
+		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
+	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,background:sliderBgColor,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiTabs',
+	props: {
+		// 标签页
+		tabs: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// rpx
+		height: {
+			type: Number,
+			default: 80
+		},
+		// rpx 只对左右padding起作用，上下为0
+		padding: {
+			type: Number,
+			default: 30
+		},
+		// 背景色
+		bgColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		// 是否固定
+		isFixed: {
+			type: Boolean,
+			default: false
+		},
+		// px
+		top: {
+			type: Number, // #ifndef H5
+
+			default: 0, // #endif
+			// #ifdef H5
+
+			default: 44
+			// #endif
+		},
+		// 是否去掉底部线条
+		unlined: {
+			type: Boolean,
+			default: false
+		},
+		// 当前选项卡
+		currentTab: {
+			type: Number,
+			default: 0
+		},
+		// 滑块宽度
+		sliderWidth: {
+			type: Number,
+			default: 68
+		},
+		// 滑块高度
+		sliderHeight: {
+			type: Number,
+			default: 6
+		},
+		// 滑块背景颜色
+		sliderBgColor: {
+			type: String,
+			default: '#FF2842'
+		},
+		sliderRadius: {
+			type: String,
+			default: '50rpx'
+		},
+		// 滑块bottom
+		bottom: {
+			type: String,
+			default: '0'
+		},
+		// 标签页宽度
+		itemWidth: {
+			type: String,
+			default: '25%'
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#999'
+		},
+		// 选中后字体颜色
+		selectedColor: {
+			type: String,
+			default: '#FF2842'
+		},
+		// 字体大小
+		size: {
+			type: Number,
+			default: 28
+		},
+		// 选中后 是否加粗 ，未选中则无效
+		bold: {
+			type: Boolean,
+			default: false
+		}
+	},
+	watch: {
+		currentTab() {
+			this.checkCor()
+		}
+	},
+	created() {
+		setTimeout(() => {
+			// 高度自适应
+			uni.getSystemInfo({
+				success: res => {
+					this.winWidth = res.windowWidth
+					this.checkCor()
+				}
+			})
+		}, 50)
+	},
+	data() {
+		return {
+			winWidth: 0,
+			scrollLeft: 0
+		}
+	},
+	methods: {
+		checkCor: function() {
+			let tabsNum = this.tabs.length
+			let padding = (this.winWidth / 750) * this.padding
+			let width = this.winWidth - padding * 2
+			let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding
+			let scrollLeft = left
+			if (this.currentTab > 0) {
+				scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab
+			}
+			this.scrollLeft = scrollLeft
+		},
+		// 点击标题切换当前页时改变样式
+		swichTabs: function(index) {
+			let item = this.tabs[index]
+			if (item && item.disabled) return
+			if (this.currentTab == index) {
+				return false
+			} else {
+				this.$emit('change', {
+					index: Number(index)
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.tui-tabs-view {
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		z-index: 99;
+	}
+
+	.tui-tabs-relative {
+		position: relative;
+	}
+
+	.tui-tabs-fixed {
+		position: fixed;
+		left: 0;
+	}
+
+	.tui-tabs-fixed::before,
+	.tui-tabs-relative::before {
+		content: '';
+		position: absolute;
+		border-bottom: 1upx solid #eaeef1;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		bottom: 0;
+		right: 0;
+		left: 0;
+	}
+
+	.tui-unlined::before {
+		border-bottom: 0 !important;
+	}
+
+	.tui-tabs-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tui-tabs-disabled {
+		opacity: 0.6;
+	}
+
+	.tui-tabs-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 2;
+	}
+
+	.tui-tabs-active {
+		transition: all 0.15s ease-in-out;
+	}
+
+	.tui-tabs-slider {
+		position: absolute;
+		left: 0;
+		transition: all 0.15s ease-in-out;
+		z-index: 0;
+		transform: translateZ(0);
+	}
+</style>

mobile-code/src/pages.json

@@ -66,6 +66,30 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/callback",
+			"pages": [
+				{
+					"path": "index"
+				}
+			]
+		},
+		{
+			"root": "pages/coupon",
+			"pages": [
+				{
+					"path": "list"
+				}
+			]
+		},
+		{
+			"root": "pages/order",
+			"pages": [
+				{
+					"path": "list"
+				}
+			]
 		}
 	],
 	"globalStyle": {

mobile-code/src/pages/callback/index.vue

@@ -0,0 +1,193 @@
+<template>
+	<!-- 各种回调页面 -->
+	<div class="app-content" :class="[contentClass]">
+		<div class="callback-wrap">
+			<div class="callback-blo">
+                <!-- 使用icon -->
+				<template v-if="false">
+				    <div class="icon">
+					    <i class="iconfont icondaizhifu"></i>
+				    </div>
+				</template>
+                <!-- 使用图片 -->
+                <template v-else>
+				    <div class="status-img">
+                        <img src="../../static/images/callback/success.png" alt="" mode="widthFix" >
+				    </div>
+                </template>
+				<div class="status-text app-size-36 app-bold">待支付</div>
+				<div class="price">
+					<span>￥</span>
+					<span class="app-size-36 app-bold">3251.00</span>
+				</div>
+				<div class="surplus app-font-color-3">剩余￥3515.00</div>
+				<div class="order-num app-font-color-3">订单号: 515155151515151551</div>
+				<!-- 一个主按钮 -->
+				<template v-if="false">
+					<div class="call-btn-com call-one-btn">
+						<div class="button-com success">余额支付</div>
+					</div>
+				</template>
+				<!-- 两个主按钮 -->
+				<template v-else>
+					<div class="call-btn-com call-two-btn">
+                        <div class="button-com default">查看订单</div>
+                        <div class="button-com">返回首页</div>
+					</div>
+				</template>
+			</div>
+            <!-- 优惠券 -->
+            <div class="coupon-wrap">
+                <div class="coupon-img">
+                    <img src="../../static/images/callback/coupon.png" alt="" mode="widthFix" >
+                </div>
+                <div class="qrcode-img">
+                    <img src="../../static/images/extension.png" alt="" mode="widthFix" >
+                </div>
+            </div>
+		</div>
+	</div>
+</template>
+
+<script>
+/** *
+	 * 页面状态
+	 * @parmas pagestatus 进入页面的状态
+	 * @parmas 1 待支付 - 余额支付 -- awaitPayYe
+	 * @parmas 2 待支付 - 微信支付 -- awaitPayWx
+	 * @parmas 3 支付成功 -- successPay
+	 * @parmas 4 评价成功 -- successEval
+	 * @parmas 5 支付成功 - 扫码支付 -- successPayCode
+	 */
+export default {
+	name: 'callback',
+	data() {
+		return {
+			pagestatus: 1,
+			contentClass: ''
+		}
+	},
+	onLoad() {
+		this.initClass(this.pagestatus)
+		uni.setNavigationBarTitle({
+			title: '支付成功'
+		})
+	},
+	methods: {
+		// 初始样式
+		initClass(val) {
+			switch (val) {
+				case 1:
+					this.contentClass = 'awaitPayYe'
+					break
+				case 2:
+					this.contentClass = 'awaitPayWx'
+					break
+				case 3:
+					this.contentClass = 'successPay'
+					break
+				case 4:
+					this.contentClass = 'successEval'
+					break
+				case 5:
+					this.contentClass = 'successPayCode'
+					break
+				default:
+					this.contentClass = 'awaitPayYe'
+					break
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		.callback-wrap {
+			padding-top: 50px;
+			background-image: url('../../static/images/callback/bg.png');
+			background-repeat: no-repeat;
+			background-size: 100% auto;
+			.callback-blo {
+				width: 90%;
+				margin: 0 auto;
+				padding: 70px 0;
+				background-color: #fff;
+				box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
+				border-radius: 10px;
+                text-align: center;
+                // 使用icon
+				.icon {
+					.iconfont {
+						font-size: 170px;
+					}
+                }
+                // 使用状态图片
+                .status-img {
+                    width: 294px;
+                    margin: 0 auto;
+                }
+                .call-btn-com {
+                    margin-top: 56px;
+                    @include disFlex(center, center);
+                }
+                // 一个按钮
+                .call-one-btn {
+                    .button-com {
+                        width: 74%;
+                        padding-top: 22px;
+                        padding-bottom: 22px;
+                        font-size: 32px;
+                    }
+                }
+                // 两个按钮
+                .call-two-btn {
+                    .button-com {
+                        width: 200px;
+                        padding-top: 22px;
+                        padding-bottom: 22px;
+                        font-size: 32px;
+                    }
+                    .default {
+                        margin-right: 20px;
+                    }
+                }
+            }
+            // 优惠券
+            .coupon-wrap {
+                width: 96%;
+                margin: 52px auto 0;
+                position: relative;
+                .qrcode-img {
+                    width: 170px;
+                    height: 170px;
+                    position: absolute;
+                    top: 40px;
+                    right: 108px;
+                }
+            }
+        }
+    }
+    // 待支付 - 公共
+    .awaitPayWx, .awaitPayYe {
+        .status-text {
+            margin-top: 22px;
+            margin-bottom: 52px;
+        }
+        .surplus {
+            margin-top: 22px;
+            margin-bottom: 38px;
+        }
+    }
+	// 待支付 - 余额
+	.awaitPayYe {
+		.icon {
+			.iconfont {
+                color: #FFA92E
+			}
+        }
+        .status-text {
+            color: #FFA92E;
+        }
+	}
+</style>

mobile-code/src/pages/category/index.vue

@@ -9,7 +9,7 @@
 			<scroll-view scroll-y class="right-box" :style="{height:height+'px'}" v-if="currentTab==index">
 				<!--内容部分 start 自定义可删除-->
 				<div class="page-view">
-					<div class="goods-list" v-for="(item, index) in 10" :key="index">
+					<div class="goods-list" v-for="(item, index) in 10" :key="index" @click="detail">
 						<div class="img-blo">
 							<img src="../../static/images/logout.png" alt mode="center" />
 						</div>
@@ -48,6 +48,11 @@ export default {
 		}, 50)
 	},
 	methods: {
+		detail() {
+			uni.navigateTo({
+				url: '/pages/goods/detail'
+			})
+		},
 		// 点击标题切换当前页时改变样式
 		swichNav: function(e) {
 			let cur = e.currentTarget.dataset.current

mobile-code/src/pages/coupon/list.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="app-content coupon-list">
+		<div class="tabs-wrap">
+			<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="33.3333%" />
+		</div>
+		<div class="list-wrap" :class="{'expired' : tabIndex == 2}">
+			<div class="list" v-for="(item, index) in 4" :key="index">
+				<div class="list-img">
+                    <!-- 已过期 -->
+                    <template v-if="tabIndex == 2">
+					    <img src="../../static/images/coupon/expired.png" alt mode="widthFix" />
+                    </template>
+                    <template v-else>
+					    <img src="../../static/images/coupon/bg.png" alt mode="widthFix" />
+                    </template>
+				</div>
+				<!-- 列表 -->
+				<div class="list-det">
+					<div class="list-det-left">
+						<div class="price-wrap">
+							<span>￥</span>
+							<span class="price">1000</span>
+						</div>
+						<div class="full-reduc app-size-28">满100可使用</div>
+					</div>
+					<div class="list-det-right">
+						<div class="coupon-message">
+							<div class="app-font-color-2">优惠券</div>
+							<div>适用：全品类</div>
+							<div>有效至：2020-10-11</div>
+						</div>
+                        <!-- 未使用 -->
+						<template v-if="tabIndex == 0">
+							<div class="button-com success">去使用</div>
+						</template>
+                        <!-- 已使用 -->
+						<template v-else-if="tabIndex == 1">
+							<div class="icon-wrap">
+								<i class="iconfont iconyishiyong"></i>
+							</div>
+						</template>
+                        <!-- 已过期 -->
+						<template v-else>
+							<div class="icon-wrap">
+								<i class="iconfont iconyiguoqi"></i>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import appTabs from '@/components/plugin/tabs'
+export default {
+	name: 'tabs',
+	components: {
+		appTabs
+	},
+	data() {
+		return {
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '未使用'
+				},
+				{
+					name: '使用记录'
+				},
+				{
+					name: '已过期'
+				}
+			]
+		}
+	},
+	methods: {
+		change(e) {
+			this.tabIndex = e.index
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.coupon-list {
+		position: relative;
+		.tabs-wrap {
+			position: absolute;
+			width: 100%;
+		}
+		.list-wrap {
+			padding: 100px 22px 0;
+			.list {
+				position: relative;
+				margin-bottom: 6px;
+				.list-det {
+					width: 100%;
+					@include disFlex(center, space-between);
+					position: absolute;
+					top: 0;
+					left: 0;
+					.list-det-left {
+					    padding: 30px 0 30px 36px;
+						width: 210px;
+						color: #fff;
+						.price-wrap {
+							margin-bottom: 6px;
+							font-size: 26px;
+							.price {
+								font-size: 60px;
+								font-weight: bold;
+								line-height: 1;
+							}
+						}
+					}
+					.list-det-right {
+						width: calc(100% - 280px);
+						margin-left: 22px;
+                        @include disFlex(center, space-between);
+                        padding: 30px 26px 30px 0;
+						.coupon-message {
+							color: $fontColor3;
+							& > div {
+								margin: 4px 0;
+							}
+						}
+						.icon-wrap {
+							position: absolute;
+							top: 20px;
+							right: 20px;
+							.iconfont {
+								font-size: 128px;
+								color: #ffbbcd;
+							}
+						}
+					}
+				}
+			}
+			// 过期
+			&.expired {
+                .list-det-right {
+                    .iconfont {
+                        color: #E5E7EC !important;
+                    }
+                }
+			}
+		}
+	}
+</style>

mobile-code/src/pages/goods/components/buy-foot.vue

@@ -11,13 +11,20 @@
             </div>
         </div>
         <div class="btn-right">
-            <div class="button-com success">立即购买</div>
+            <div class="button-com success" @click="buy">立即购买</div>
         </div>
     </div>
 </template>
 
 <script>
-export default {}
+export default {
+	name: 'buy-foot',
+	methods: {
+		buy() {
+			this.$emit('buy')
+		}
+	}
+}
 </script>
 
 <style lang="scss" scoped>

mobile-code/src/pages/goods/components/sel-popup.vue

@@ -0,0 +1,200 @@
+<template>
+	<div class="sel-popup">
+        <bottom-popup  class="popup-wrap" :show="show" @close="close">
+            <app-close @close="close" />
+            <div class="tui-popup-box">
+				<div class="tui-product-box">
+					<img src="https://www.thorui.cn/img/product/11.jpg" class="tui-popup-img" />
+					<div class="tui-popup-price">
+                        <div class="goods-tit app-font-size-30">包月鲜花，购买前请查看</div>
+						<div class="tui-amount tui-bold">￥49.00</div>
+					</div>
+				</div>
+				<scroll-view scroll-y class="tui-popup-scroll">
+					<div class="tui-scrolldiv-box">
+						<div class="tui-bold tui-attr-title">颜色</div>
+						<div class="tui-attr-box">
+							<div class="tui-attr-item">
+								包月玫瑰花
+							</div>
+							<div class="tui-attr-item">
+								包月玫瑰花
+							</div>
+							<div class="tui-attr-item">
+								包月玫瑰花
+							</div>
+							<div class="tui-attr-item tui-attr-active">
+								包月百合花
+							</div>
+						</div>
+
+						<div class="tui-number-box tui-bold tui-attr-title">
+							<div class="tui-attr-title">数量</div>
+							<number-box :max="99" :min="1" :value="buyNum" @change="change"></number-box>
+						</div>
+					</div>
+				</scroll-view>
+				<div class="tui-popup-btn">
+                    <div class="button-com success">下一步</div>
+				</div>
+			</div>
+        </bottom-popup>
+    </div>
+</template>
+
+<script>
+import bottomPopup from '@/components/plugin/bottom-popup'
+import numberBox from '@/components/plugin/number-box'
+import appClose from '@/components/module/app-close'
+export default {
+	name: 'sel-popup',
+	components: {
+		bottomPopup,
+		numberBox,
+		appClose
+	},
+	props: {
+		buyNum: {
+			type: Number,
+			default: 1
+		},
+		show: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		change(e) {
+			this.$emit('change', e)
+		},
+		close() {
+			this.$emit('close')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/.popup-wrap {
+	.tui-popup-class {
+		border-top-left-radius: 24rpx;
+        border-top-right-radius: 24rpx;
+        // 适配iphoneX
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.tui-popup-box {
+		position: relative;
+		padding: 30rpx 30px 100rpx;
+	}
+
+	.tui-popup-btn {
+		width: 100%;
+		position: absolute;
+		left: 0;
+        bottom: 0;
+        padding: 14px 0;
+        @include disFlex(center, center);
+        border-top: 1px solid $borderColor;
+        .button-com {
+            width: 80%;
+            font-size: 32px;
+            padding-top: 12px;
+            padding-bottom: 12px;
+        }
+	}
+
+	.tui-product-box {
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+		padding-bottom: 30rpx;
+	}
+
+	.tui-popup-img {
+		height: 200rpx;
+		width: 200rpx;
+		border-radius: 24rpx;
+		display: block;
+	}
+
+	.tui-popup-price {
+		padding-left: 20rpx;
+        padding-bottom: 8rpx;
+        .goods-tit {
+            margin-bottom: 75px;
+        }
+	}
+
+	.tui-amount {
+		color: #ff201f;
+		font-size: 36rpx;
+	}
+
+	.tui-popup-scroll {
+		height: 380rpx;
+		font-size: 26rpx;
+	}
+
+	.tui-scrollview-box {
+		padding: 0 30rpx 60rpx 30rpx;
+		box-sizing: border-box;
+	}
+
+	.tui-attr-title {
+		padding: 10rpx 0;
+		color: #333;
+	}
+
+	.tui-attr-box {
+		font-size: 0;
+		padding: 20rpx 0;
+	}
+
+	.tui-attr-item {
+		max-width: 100%;
+		min-width: 200rpx;
+		height: 64rpx;
+		display: -webkit-inline-flex;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: #f7f7f7;
+		padding: 0 26rpx;
+		box-sizing: border-box;
+		border-radius: 32rpx;
+		margin-right: 20rpx;
+		margin-bottom: 20rpx;
+		font-size: 26rpx;
+	}
+
+	.tui-attr-active {
+		background: #fcedea !important;
+		color: #e41f19;
+		font-weight: bold;
+		position: relative;
+	}
+
+	.tui-attr-active::after {
+		content: "";
+		position: absolute;
+		border: 1rpx solid #e41f19;
+		width: 100%;
+		height: 100%;
+		border-radius: 40rpx;
+		left: 0;
+		top: 0;
+	}
+
+	.tui-number-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 0 30rpx 0;
+		box-sizing: border-box;
+	}
+}
+</style>

mobile-code/src/pages/goods/detail.vue

@@ -40,27 +40,44 @@
 		</div>
 		<!-- 简要说明 -->
 		<app-trademark />
-		<buy-foot />
+		<sel-popup :show="popupShow" :buyNum="buyNum" @change="changeNum" @close="hidePopup" />
+		<buy-foot @buy="showPopup" />
 	</div>
 </template>
 
 <script>
-import AppSwiper from '@/components/app-swiper'
+import appSwiper from '@/components/app-swiper'
 import appTag from '@/components/module/app-tag.vue'
-import AppTrademark from '@/components/module/app-trademark'
+import appTrademark from '@/components/module/app-trademark'
 import buyFoot from './components/buy-foot.vue'
+import selPopup from './components/sel-popup.vue'
 export default {
 	name: 'goods-detail',
 	components: {
-		AppSwiper,
+		appSwiper,
 		appTag,
-		AppTrademark,
-		buyFoot
+		appTrademark,
+		buyFoot,
+		selPopup
 	},
 	data() {
-		return {}
+		return {
+			buyNum: 1,
+			popupShow: true
+		}
 	},
-	onLoad(option) {}
+	onLoad(option) {},
+	methods: {
+		changeNum(e) {
+			this.buyNum = e.value
+		},
+		showPopup() {
+			this.popupShow = true
+		},
+		hidePopup() {
+			this.popupShow = false
+		}
+	}
 }
 </script>
 

mobile-code/src/pages/home/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="app-content">
 		<button @click="toPay">去支付页</button>
+		<button @click="$util.pageTo('/pages/callback/index')">支付回调</button>
 		<!-- <app-footer /> -->
 	</div>
 </template>

mobile-code/src/pages/order/components/list.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="list-module">
+		<div class="list-left">
+			<div class="image">
+				<img src="../../../static/images/logout.png" alt />
+			</div>
+			<div class="list-msg">
+				<div class="title">天使面孔</div>
+				<div class="desc">玫瑰花为主</div>
+			</div>
+		</div>
+		<div class="list-right">
+			<div class="price">￥300.00</div>
+			<div class="num">*1</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'list-module',
+	data() {
+		return {}
+	},
+	methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+	.list-module {
+		@include disFlex(center, space-between);
+		padding: 20px 0;
+		border-bottom: 1px solid $borderColor;
+		.list-left {
+			@include disFlex(flex-start, space-between);
+			.image {
+				width: 140px;
+			}
+			.list-msg {
+                margin-left: 20px;
+				.title {
+					font-size: 28px;
+                    color: $fontColor2;
+                    margin-bottom: 10px;
+				}
+				.desc {
+					color: $fontColor3;
+				}
+			}
+        }
+        .list-right {
+            text-align: right;
+            color: $fontColor2;
+            .price {
+                margin-bottom: 70px;
+                color: #333;
+            }
+        }
+	}
+</style>

mobile-code/src/pages/order/list.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="app-content">
+		<div class="list-wrap" v-for="(item, index) in 4" :key="index">
+			<div class="list-top flex-center-between">
+				<div class="app-font-color-3">订单编号：3261515151</div>
+				<div class="app-price">等待支付</div>
+			</div>
+			<div class="list-blo">
+				<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
+			</div>
+			<div class="list-bottom flex-center-between">
+				<div>
+                    <span>应付金额：</span>
+                    <span class="app-size-30 app-bold">¥580.00</span>
+                </div>
+				<div class="button-com success">立即付款</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import listModule from './components/list'
+export default {
+	name: 'order-list',
+	components: {
+		listModule
+	},
+	data() {
+		return {}
+	},
+	onPullDownRefresh() {
+		console.log('fasdfasdf')
+	},
+	// 加载更多
+	onReachBottom() {
+		console.log('5151')
+	},
+	methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.app-content {
+    padding-top: 20px;
+    padding-bottom: 1px;
+	.list-wrap {
+        padding: 0 30px;
+        background-color: #fff;
+        margin-bottom: 20px;
+        .list-top, .list-bottom {
+            padding: 20px 0;
+            border-bottom: 1px solid $borderColor;
+        }
+	}
+}
+</style>

mobile-code/src/pages/user/index.vue

@@ -46,12 +46,12 @@
 		</div>
 		<div class="list-content">
 			<tui-list-view title class="tui-list-view">
-				<tui-list-cell @click="detail" :arrow="true" class="tui-list">
+				<tui-list-cell class="tui-list" :arrow="true" @click="$util.pageTo('/pages/order/list')">
 					<div class="list-wrap">
 						<div class="list-label">我的订单</div>
 					</div>
 				</tui-list-cell>
-				<tui-list-cell @click="detail" class="tui-list">
+				<tui-list-cell class="tui-list" @click="detail">
 					<div class="list-wrap">
 						<div class="list-label">我的邀请</div>
 					</div>
@@ -59,17 +59,17 @@
 						<i class="iconfont iconshoujihao"></i>
 					</div>
 				</tui-list-cell>
-				<tui-list-cell @click="detail" class="tui-list">
+				<tui-list-cell class="tui-list" @click="$util.pageTo('/pages/coupon/list')">
 					<div class="list-wrap">
 						<div class="list-label">我的优惠券</div>
 					</div>
 				</tui-list-cell>
-				<tui-list-cell @click="detail" class="tui-list">
+				<tui-list-cell class="tui-list" @click="detail">
 					<div class="list-wrap">
 						<div class="list-label">支付密码设置</div>
 					</div>
 				</tui-list-cell>
-				<tui-list-cell @click="detail" class="tui-list">
+				<tui-list-cell class="tui-list" @click="detail">
 					<div class="list-wrap">
 						<div class="list-label">会员权益</div>
 					</div>
@@ -78,7 +78,7 @@
 		</div>
 		<div class="list-content">
 			<tui-list-view title class="tui-list-view">
-				<tui-list-cell @click="detail" :last="true" class="tui-list">
+				<tui-list-cell class="tui-list" :last="true" @click="detail">
 					<div class="list-wrap">
 						<div class="list-label">退出登录</div>
 					</div>
@@ -87,9 +87,7 @@
 		</div>
 		<!-- 登录弹窗 -->
 		<bottom-popup class="popup-wrap" :show="popupShow" @close="hidePopup">
-			<div class="app-close" @click="hidePopup">
-				<i class="iconfont iconclose"></i>
-			</div>
+			<app-close @close="hidePopup" />
 			<div class="popup-content">
 				<div class="step-wrap">
 					<app-step :index="stepIndex" />
@@ -148,6 +146,7 @@ import tuiListCell from '@/components/plugin/list-cell'
 import bottomPopup from '@/components/plugin/bottom-popup'
 import appStep from '@/components/app-step'
 import appTrademark from '@/components/module/app-trademark'
+import appClose from '@/components/module/app-close'
 export default {
 	name: 'user',
 	components: {
@@ -156,7 +155,8 @@ export default {
 		tuiListCell,
 		bottomPopup,
 		appStep,
-		appTrademark
+		appTrademark,
+		appClose
 	},
 	data() {
 		return {
@@ -268,6 +268,8 @@ export default {
 		.tui-popup-class {
 			border-top-left-radius: 20px;
 			border-top-right-radius: 20px;
+        	// 适配iphoneX
+			padding-bottom: env(safe-area-inset-bottom);
 		}
 		.popup-content {
 			padding-top: 60px;

mobile-code/src/static/css/base.scss

@@ -96,59 +96,6 @@
     justify-content: flex-end;
 }
 
-.flex-pack-justify-start {
-    -webkit-box-pack: start;
-    -webkit-justify-content: start;
-    -ms-flex-pack: flex-start;
-    justify-content: flex-start;
-}
-
-.flex-pack-justify-end {
-    -webkit-box-pack: end;
-    -webkit-justify-content: end;
-    -ms-flex-pack: flex-end;
-    justify-content: flex-end;
-}
-
-.flex-pack-around {
-    -webkit-justify-content: space-around;
-    justify-content: space-around;
-}
-
-.flex-align-center {
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.flex-align-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-}
-
-.flex-wrap {
-    -webkit-box-lines: multiple;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-
-.flex1 {
-    -webkit-box-flex: 1;
-    /* OLD - iOS 6-, Safari 3.1-6 */
-    -moz-box-flex: 1;
-    /* OLD - Firefox 19- */
-    -webkit-flex: 1;
-    /* Chrome */
-    -ms-flex: 1;
-    /* IE 10 */
-    flex: 1;
-    /* NEW, Spec - Opera 12.1, Firefox 20+ */
-}
-
 // ===================    定义的全局字体普通样式 ========================
 
 .app-padding {

mobile-code/src/static/css/common.scss

@@ -9,7 +9,7 @@
 page, body {
     font-family: 'microsoft yahei';
     font-size: 24px;
-    height: 100%;
+    // height: 100%;
     // line-height: 1;
 }
 .app-wh100 {
@@ -42,16 +42,6 @@ page, body {
     box-sizing: border-box;
 }
 
-// 公告关闭按钮
-.app-close {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	color: $fontColor3;
-	background-color: #fff;
-	padding: 20px;
-}
-
 // 按钮公共样式
 .button-com {
 	display: inline-block;
@@ -67,6 +57,10 @@ page, body {
 	color: #fff;
 	background-color: $mainColor;
 }
+.button-com.default {
+	color: $fontColor2;
+	border-color: #DDDDDD;
+}
 
 // 带统计字数文本域
 .textarea_wrap {

mobile-code/src/static/css/reset.scss

@@ -5,11 +5,15 @@
 /*  #endif  */
 
 /*  #ifdef  H5  */
-// uni-page-body, body {
-// 	height: auto;
-// 	min-height: 100%;
-// }
 /*  #endif  */
+uni-page-body, body, html {
+	height: auto;
+	min-height: 100%;
+}
+
+body {
+	-webkit-overflow-scrolling: touch
+}
 
 // 修改uni-nav-bar样式
 .uni-navbar-header {
@@ -44,12 +48,13 @@ uni-picker .uni-picker-item {
 image {
 	width: 100%;
 	height: auto;
+	display: block;
 }
 
 img {
 	width: 100%;
 	height: auto;
-	display: inline-block;
+	display: block;
 }
 
 .datetime-picker{

mobile-code/src/utils/common.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-// import router from '@/router'
 import store from '@/store'
 import { mobileReg } from './tools/validate'
 import { uploadPic } from '@/api/common'
@@ -71,53 +69,6 @@ export function getMiniAppUrl(data = {}, isPath = false) {
 	return getRoute
 }
 
-// 获取c端首页路径
-export function getSpreadIndex() {
-	const userInfo = store.state.user.basicUser ? store.state.user.basicUser : store.state.user.user
-	let text = ''
-	switch (userInfo.role_id) {
-		case 1:
-			text = `/pages/design/designCompany/indexNew`
-			break
-		case 2:
-			text = `/pages/design/material/index`
-			break
-		case 3:
-			text = `/pages/design/designerIndex`
-			break
-		default:
-			text = '/pages/design/designCompany/indexNew'
-			break
-	}
-	return text
-}
-
-// 跳转到别人的主页
-export function jumpOtherUser(owner_user_id, role_id) {
-	switch (role_id) {
-		case 1:
-			uni.navigateTo({
-				url: `/pages/design/designCompany/indexNew?owner_user_id=${owner_user_id}`
-			})
-			break
-		case 2:
-			uni.navigateTo({
-				url: `/pages/design/material/index?owner_user_id=${owner_user_id}`
-			})
-			break
-		case 3:
-			uni.navigateTo({
-				url: `/pages/design/designerIndex?owner_user_id=${owner_user_id}`
-			})
-			break
-		default:
-			uni.navigateTo({
-				url: `/pages/design/designerIndex?owner_user_id=${owner_user_id}`
-			})
-			break
-	}
-}
-
 // 获取当前时间戳
 export function getTimestamp() {
 	return Date.parse(new Date())
@@ -531,7 +482,6 @@ export default {
 	getFormatDate,
 	isMobile,
 	getDataTimestamp,
-	jumpOtherUser,
 	isPersonRoleType,
 	isWxBrowser,
 	isWxMiniapp,
@@ -540,6 +490,5 @@ export default {
 	verifiPhone,
 	calcDistance,
 	queryData,
-	upLoadImg,
-	getSpreadIndex
+	upLoadImg
 }

mobile-code/src/utils/util.js

@@ -1,4 +1,5 @@
 import { mobileReg } from '@/utils/tools/validate'
+// 是否为空
 const isEmpty = (val) => {
 	if (val instanceof Array) {
 		if (val.length === 0) return true
@@ -11,6 +12,36 @@ const isEmpty = (val) => {
 	return false
 }
 
+// 是否为数组
+const isArray = (arr) => {
+	return (typeof arr == 'object') && arr.constructor == Array
+}
+
+// 是否为字符串
+const isString = (str) => {
+	return (typeof str == 'string') && str.constructor == String
+}
+
+// 是否为对象
+const isObject = (obj) => {
+	return (typeof obj == 'object') && obj.constructor == Object
+}
+
+// 是否为数字
+const isNumber = (num) => {
+	return (typeof num == 'number') && num.constructor == Number
+}
+
+// 是否为日期类型
+const isDate = (date) => {
+	return (typeof date == 'object') && date.constructor == Date
+}
+
+// 是否为函数
+const isFunction = (obj) => {
+	return (typeof obj == 'object') && obj.constructor == Function
+}
+
 // 对象参数转为url参数
 const parse = (query) => {
 	return Object.keys(query)
@@ -83,7 +114,13 @@ export const $formatDate = (num, fmt = 'YYYY-MM-DD HH:mm:ss') => {
  * @parmas item.query 为跳转携带的参数
  * @parmas item.type 为跳转调用的函数 1为navigateTo, 2为redirectTo, 3为reLaunch
  */
-export const jumpMenuFn = (item) => {
+export const pageTo = (item) => {
+	if (isString(item)) {
+		uni.navigateTo({
+			url: item
+		})
+		return false
+	}
 	if (item.funtion) {
 		item.funtion()
 	}
@@ -121,6 +158,6 @@ export default {
 	$checkMobile,
 	$checkName,
 	$formatDate,
-	jumpMenuFn,
+	pageTo,
 	isLogin
 }