Adam / gulu-vue

Browse Code »

Commit f1da24fb30607b6d39e18bac713e45778b577462

Authored by Adam 2020-05-13 20:00:10 +0800

2 parents bbdb26d05a 09a4a9a0aa

Exists in master

s

Showing 36 changed files Show diff stats

src/components/CommodityCard/CommodityCard.vue

Diff comments View file @f1da24f

 <template>
-	<view class="card" @tap="toGoods(goods.id)">
+	<view class="card" @tap="toGoods(goods.goods_id,goods.goodType)">
-		<image mode="widthFix" :src="goods.imgurl" ></image>
+		<image mode="widthFix" :src="goods.img" ></image>
 		<view class="name">{{goods.name}}</view>
 		<view class="info">
 			<view class="priceBox">
-			<view class="price">{{goods.rsSon.Min_Price}}</view>
+				<view class="price">{{goods.price}}</view>
-			<view class="originCost">
+				<view class="originCost">
-				{{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}}
+					{{goods.originCost}}
-				<!-- {{goods.oldPrice}} -->
 				</view>
 			</view>
-			<view class="slogan">{{goods.trade_num}}</view>
+			<view class="slogan">{{goods.slogan}}</view>
 		</view>
 	</view>
 </template>
 <script>
 	export default {
 		props: {
 			/**
 			 * 商品数据
 			 */
 			goods: {
-				id: Number,
+				goods_id: Number,
-				imgurl: String,
+				img: String,
 				name: String,
-				oldPrice:String,
+				originCost:String,
 				price: String,
-				memo:String
+				slogan:String,
+				goodType:String,
 			}
 		},
 		created() {
+			console.log(this.goods)
 		},
 		data() {
 			return {
 			};
 		},
 		methods:{
-			toGoods(id){
+			toGoods(id,type){
-				console.log('toGoods    =====> id======>', id)
+				// console.log('toGoods    =====> id======>', id)
-				uni.navigateTo({
+				// console.log(type)
-					url: `../detail/detail?oderId=1`,
+				switch(type){
-					success: res => {},
+					case 1:
-					fail: () => {},
+						uni.navigateTo({
-					complete: () => {}
+							url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
-				});
+							success: res => {},
+							fail: () => {},
+							complete: () => {}
+						});
+					break;
+					case 2:
+						uni.navigateTo({
+							url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
+							success: res => {},
+							fail: () => {},
+							complete: () => {}
+						});
+					break;
+					case 3:
+						uni.navigateTo({
+							url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
+							success: res => {},
+							fail: () => {},
+							complete: () => {}
+						});
+					break;
+					case 4:
+						uni.navigateTo({
+							url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
+							success: res => {},
+							fail: () => {},
+							complete: () => {}
+						});
+					break;
+					default :
+						break
+				}
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	image{
 		width: 100%;
 		height: 120rpx;
 	}
 	.name{
 		width: 92%;
 		height: 54rpx;
 		padding: 5px 4%;
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
 		text-align: justify;
 		overflow: hidden;
 		font-size: 24rpx;
 		color: #333333;
 	}
 	.info{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		width: 92%;
 		padding: 5px 4% 5px 4%;
 		.priceBox{
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			.price{
 				color: #EB5D3B;
 				font-size: 28rpx;
 				font-weight: 600;
 				margin-right: 10rpx;
 			}
 			.originCost{
 				text-decoration:line-through;
 				color: #999999;
 				font-size: 20rpx;
 			}
 		}
 		.slogan{
 			color: #999999;
 			font-size: 20rpx;
 		}
 	}
 </style>

src/components/UniCollapseItem/UniCollapseItem.vue

Diff comments View file @f1da24f

 <template>
 	<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
 	 class="uni-collapse-cell">
 		<view class="uni-collapse-cell__title" @click="onClick">
 			<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
 			<text class="uni-collapse-cell__title-text">{{ title }}</text>
 			<!-- #ifdef MP-ALIPAY -->
 			<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
 			 class="uni-collapse-cell__title-arrow">
 				<uni-icons color="#bbb" size="20" type="arrowdown" />
 			</view>
 			<!-- #endif -->
 			<!-- #ifndef MP-ALIPAY -->
 			<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
 			 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
 			<!-- #endif -->
 		</view>
 		<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
-			<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
+			<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
+			:style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
+			>
 				<slot />
 			</view>
 		</view>
 	</view>
 </template>
 <script>
 	import UniIcons from '../UniIcons/UniIcons.vue'
 	export default {
 		name: 'UniCollapseItem',
 		components: {
 			UniIcons
 		},
 		props: {
 			title: {
 				// 列表标题
 				type: String,
 				default: ''
 			},
 			name: {
 				// 唯一标识符
 				type: [Number, String],
 				default: 0
 			},
 			disabled: {
 				// 是否禁用
 				type: Boolean,
 				default: false
 			},
 			showAnimation: {
 				// 是否显示动画
 				type: Boolean,
 				default: false
 			},
 			open: {
 				// 是否展开
 				type: Boolean,
 				default: false
 			},
 			thumb: {
 				// 缩略图
 				type: String,
 				default: ''
 			}
 		},
 		data() {
 			return {
 				isOpen: false
 			}
 		},
 		watch: {
 			open(val) {
 				this.isOpen = val
 			}
 		},
 		inject: ['collapse'],
 		created() {
 			this.isOpen = this.open
 			this.nameSync = this.name ? this.name : this.collapse.childrens.length
 			this.collapse.childrens.push(this)
 			if (String(this.collapse.accordion) === 'true') {
 				if (this.isOpen) {
 					let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
 					if (lastEl) {
 						this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
 					}
 				}
 			}
 		},
 		methods: {
 			onClick() {
 				if (this.disabled) {
 					return
 				}
 				if (String(this.collapse.accordion) === 'true') {
 					this.collapse.childrens.forEach(vm => {
 						if (vm === this) {
 							return
 						}
 						vm.isOpen = false
 					})
 				}
 				this.isOpen = !this.isOpen
 				this.collapse.onChange && this.collapse.onChange()
 				this.$forceUpdate()
 				console.log(this.isOpen)
 			}
 		}
 	}
 </script>
 <style lang="scss" scoped>
 	@import '@/uni.scss';
 	.uni-collapse-cell {
 		flex-direction: column;
 		border-color: #FFFFFF;
 		border-bottom-width: 1px;
 		border-bottom-style: solid;
 	}
 	.uni-collapse-cell--hover {
 		background-color: #FFFFFF;
 	}
 	.uni-collapse-cell--open {
 		background-color: #FFFFFF;
 	}
 	.uni-collapse-cell--disabled {
 		background-color: #FFFFFF;
 		// opacity: 0.3;
 	}
 	.uni-collapse-cell--hide {
 		height: 48px;
 	}
 	.uni-collapse-cell--animation {
-		transition: transform 0.5s ease;
+		transition: transform 0s ease;
 		transition-property: transform;
-		transition-duration: 0.5s;
+		transition-duration: 0s;
 		transition-timing-function: ease;
 	}
 	.uni-collapse-cell__title {
 		// padding: 12px 12px;
 		font-size: 16px;
 		color: #333333;
 		position: relative;
 		/* #ifndef APP-NVUE */
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
 		/* #endif */
 		height: 48px;
 		line-height: 24px;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
 	}
 	.uni-collapse-cell__title:active {
 		background-color: #FFFFFF;
 	}
 	.uni-collapse-cell__title-img {
 		height: $uni-img-size-base;
 		width: $uni-img-size-base;
 		margin-right: 10px;
 	}
 	.uni-collapse-cell__title-arrow {
 		width: 20px;
 		height: 20px;
 		transform: rotate(0deg);
 		transform-origin: center center;
 	}
 	.uni-collapse-cell__title-arrow-active {
 		transform: rotate(180deg);
 	}
 	.uni-collapse-cell__title-text {
 		flex: 1;
 		font-size: $uni-font-size-base;
 		/* #ifndef APP-NVUE */
 		white-space: nowrap;
 		color: inherit;
 		/* #endif */
 		/* #ifdef APP-NVUE */
 		lines: 1;
 		/* #endif */
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.uni-collapse-cell__content {
 		overflow: hidden;
 	}
 	.uni-collapse-cell__wrapper {
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
 		flex-direction: column;
 	}
 	.uni-collapse-cell__content--hide {
 		// height: 0px;
 		// line-height: 0px;
 	}
 </style>

src/components/UniCountdown/UniCountdown.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="uni-countdown">
	3	<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
	4	<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
	5	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
	6	<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
	7	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
	8	<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
	9	<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
	10	<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
	11	</view>
	12	</template>
	13	<script>
	14	export default {
	15	name: 'UniCountdown',
	16	props: {
	17
	18	showDay: {
	19	type: Boolean,
	20	default: true
	21	},
	22	showColon: {
	23	type: Boolean,
	24	default: true
	25	},
	26	backgroundColor: {
	27	type: String,
	28	default: '#FFFFFF'
	29	},
	30	borderColor: {
	31	type: String,
	32	default: '#000000'
	33	},
	34	color: {
	35	type: String,
	36	default: '#000000'
	37	},
	38	splitorColor: {
	39	type: String,
	40	default: '#000000'
	41	},
	42	day: {
	43	type: Number,
	44	default: 0
	45	},
	46	hour: {
	47	type: Number,
	48	default: 0
	49	},
	50	minute: {
	51	type: Number,
	52	default: 0
	53	},
	54	second: {
	55	type: Number,
	56	default: 0
	57	}
	58	},
	59	data() {
	60	return {
	61	timer: null,
	62	syncFlag: false,
	63	d: '00',
	64	h: '00',
	65	i: '00',
	66	s: '00',
	67	leftTime: 0,
	68	seconds: 0
	69	}
	70	},
	71	watch: {
	72	day(val) {
	73	this.changeFlag()
	74	},
	75	hour(val) {
	76	this.changeFlag()
	77	},
	78	minute(val) {
	79	this.changeFlag()
	80	},
	81	second(val) {
	82	this.changeFlag()
	83	}
	84	},
	85	created: function(e) {
	86	this.startData();
	87	},
	88	beforeDestroy() {
	89	clearInterval(this.timer)
	90	},
	91	methods: {
	92	toSeconds(day, hours, minutes, seconds) {
	93	return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
	94	},
	95	timeUp() {
	96	clearInterval(this.timer)
	97	this.$emit('timeup')
	98	},
	99	countDown() {
	100	let seconds = this.seconds
	101	let [day, hour, minute, second] = [0, 0, 0, 0]
	102	if (seconds > 0) {
	103	day = Math.floor(seconds / (60 * 60 * 24))
	104	hour = Math.floor(seconds / (60 * 60)) - (day * 24)
	105	minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
	106	second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
	107	} else {
	108	this.timeUp()
	109	}
	110	if (day < 10) {
	111	day = '0' + day
	112	}
	113	if (hour < 10) {
	114	hour = '0' + hour
	115	}
	116	if (minute < 10) {
	117	minute = '0' + minute
	118	}
	119	if (second < 10) {
	120	second = '0' + second
	121	}
	122	this.d = day
	123	this.h = hour
	124	this.i = minute
	125	this.s = second
	126	},
	127	startData() {
	128	this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
	129	if (this.seconds <= 0) {
	130	return
	131	}
	132	this.countDown()
	133	this.timer = setInterval(() => {
	134	this.seconds--
	135	if (this.seconds < 0) {
	136	this.timeUp()
	137	return
	138	}
	139	this.countDown()
	140	}, 1000)
	141	},
	142	changeFlag() {
	143	if (!this.syncFlag) {
	144	this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
	145	this.startData();
	146	this.syncFlag = true;
	147	}
	148	clearInterval(this.timer)
	149	}
	150	}
	151	}
	152	</script>
	153	<style lang="scss" scoped>
	154	@import '~@/uni.scss';
	155	$countdown-height: 48rpx;
	156	$countdown-width: 52rpx;
	157
	158	.uni-countdown {
	159	/* #ifndef APP-NVUE */
	160	display: flex;
	161	/* #endif */
	162	flex-direction: row;
	163	justify-content: flex-start;
	164	padding: 2rpx 0;
	165	}
	166
	167	.uni-countdown__splitor {
	168	/* #ifndef APP-NVUE */
	169	display: flex;
	170	/* #endif */
	171	justify-content: center;
	172	line-height: $countdown-height;
	173	padding: 5rpx;
	174	font-size: 18px;
	175	}
	176
	177	.uni-countdown__number {
	178	/* #ifndef APP-NVUE */
	179	display: flex;
	180	/* #endif */
	181	justify-content: center;
	182	align-items: center;
	183	width: $countdown-width;
	184	height: $countdown-height;
	185	line-height: $countdown-height;
	186	margin: 5rpx;
	187	text-align: center;
	188	font-size: 18px;
	189	}
	190	</style>
	191

src/components/UniSliper/UniSliper.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<div class="c-progress">
	3	<div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
	4	<div class="c-progress-inner" :style="setProgressStyle"></div>
	5	<div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
	6	</div>
	7	<span v-if="showPerText">{{stand_width}}mm</span>
	8	</div>
	9	</template>
	10
	11	<script>
	12	// 使用了element的颜色
	13	const colorTable = {
	14	success: '#13ce66',
	15	fail: '#ff4949',
	16	warning: '#e6a23c',
	17	default: '#409EFF'
	18	}
	19	export default {
	20	name: 'CProgress',
	21	props: {
	22	percent: {
	23	type: Number,
	24	default: 60
	25	},
	26	showSlider: {
	27	type: Boolean,
	28	default: true
	29	},
	30	showPerText: {
	31	type: Boolean,
	32	default: true
	33	},
	34	// 进度条的宽度
	35	width: {
	36	type: Number,
	37	default: 300
	38	},
	39	bgColor: {
	40	type: String,
	41	default: '#ebeef5'
	42	},
	43	progressColor: {
	44	type: String,
	45	default: '#409EFF'
	46	},
	47	// 滑块的宽度
	48	sliderWidth: {
	49	type: Number,
	50	default: 20
	51	},
	52	// 颜色的类型
	53	type: {
	54	type: String,
	55	default: colorTable.default
	56	},
	57	//规格长度
	58	standard:{
	59	type: Number,
	60	default: 1.4
	61	},
	62	//初始长度
	63	stand_width:{
	64	type: Number,
	65	default: 0
	66	}
	67	},
	68	data () {
	69	return {
	70	sliderLeft: 0, // 滑块相对父元素发x坐标
	71	progressWidth: 0, // 进度条当前的的宽度
	72	tempPercent: 0,
	73	}
	74	},
	75	computed: {
	76	// 设置进度条的背景样式
	77	setProgressBgStyle () {
	78	return {
	79	// 加上滑块的宽度
	80	width: `${this.width + this.sliderWidth}px`
	81	}
	82	},
	83	// 设置进度条的样式
	84	setProgressStyle () {
	85	const color = colorTable[this.type] \|\| this.progressColor
	86	return {
	87	width: `${this.progressWidth}px`,
	88	background: color
	89	}
	90	},
	91	// 设置滑块的样式
	92	setSliderStyle () {
	93	const color = colorTable[this.type] \|\| this.progressColor
	94	return {
	95	border: `1px solid ${color}`,
	96	width: `${this.sliderWidth}px`,
	97	height: `${this.sliderWidth}px`,
	98	left: `${this.sliderLeft}px`
	99	}
	100	}
	101	},
	102	mounted () {
	103	this.sliderLeft = this.width / 100 * this.percent
	104	this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
	105	this.tempPercent = this.percent
	106	this.addListener()
	107	},
	108	methods: {
	109	addListener () {
	110	const slider = this.$refs.slider
	111	const progress = this.$refs.progress
	112	let isClickSlider = false
	113	let distance = 0 // 滑块与点击坐标的绝对距离
	114	progress.onclick = (e) => {
	115	// 阻止事件冒泡
	116	if (e.target == slider) {
	117	return
	118	}
	119	let curX = progress.offsetLeft
	120	this.sliderLeft = e.pageX - curX
	121	if (this.sliderLeft <= 0) {
	122	this.sliderLeft = 0
	123	}
	124	if (this.sliderLeft >= this.width) {
	125	this.sliderLeft = this.width
	126	}
	127	this._countCurPercent()
	128	}
	129	// slider.onmousedown = (e) => {
	130	// isClickSlider = true
	131	// let curX = slider.offsetLeft
	132	// distance = e.pageX - curX // 得出绝对距离
	133	// }
	134	progress.onmousemove = (e) => {
	135	if (isClickSlider) {
	136	// 判断是否已经超出进度条的长度
	137	if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
	138	this.sliderLeft = e.pageX - distance
	139	this._countCurPercent()
	140	}
	141	}
	142	}
	143	progress.onmouseup = () => {
	144	isClickSlider = false
	145	}
	146	},
	147	// 算出百分比
	148	_countCurPercent () {
	149	this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
	150	this.progressWidth = this.sliderLeft + 20
	151	// 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
	152	if (this.tempPercent <= 0) {
	153	this.progressWidth = 0
	154	this.sliderLeft = 0
	155	}
	156	if (this.tempPercent >= 100) {
	157	this.progressWidth = this.width + 20
	158	this.sliderLeft = this.width
	159	}
	160	this.stand_width = this.tempPercent*this.standard
	161	this.stand_width = parseInt(this.stand_width/1) //取整
	162	this.$emit('percentChange', this.tempPercent)
	163	}
	164	}
	165	}
	166	</script>
	167
	168	<style scoped lang="scss">
	169	.c-progress {
	170	$width: 300px;
	171	$radius: 5px;
	172	display: flex;
	173	align-items: center;
	174
	175	span {
	176	margin-left: 5px;
	177	font-size: 14px;
	178	color: #666;
	179	}
	180
	181	.c-progress-outer {
	182	width: $width;
	183	height: 10px;
	184	background: #ebeef5;
	185	position: relative;
	186	display: flex;
	187	align-items: center;
	188
	189	.c-progress-inner {
	190	width: 100px;
	191	height: 10px;
	192	background: #409EFF;
	193	}
	194
	195	.c-progress-slider {
	196	width: 20px;
	197	height: 20px;
	198	border-radius: 50%;
	199	background: #fff;
	200	border: 1px solid #409EFF;
	201	position: absolute;
	202	z-index: 10;
	203	left: 10px;
	204	}
	205	}
	206	}
	207	</style>

src/pages.json

Diff comments View file @f1da24f

1	{	1	{
2	"pages": [	2	"pages": [
3	{	3	{
4	"path": "pages/cart/cart",
5	"style": {
6	"navigationBarTitleText": "购物车"
7	}
8	},
9	{
10	"path": "pages/index/index",	4	"path": "pages/index/index",
11	"style": {	5	"style": {
12	"navigationBarTitleText": "商城一览"	6	"navigationBarTitleText": "商城一览"
13	}	7	}
14	},	8	},
		9	{
		10	"path": "pages/myOrder/myOrder",
		11	"style": {
		12	"navigationBarTitleText": "我的订单"
		13	}
15	{	14	},
16	"path": "pages/frameDetail/frameDetail",	15	{
17	"style": {	16	"path": "pages/frameDetail/frameDetail",
18	"navigationBarTitleText": "产品详情"	17	"style": {
19	}	18	"navigationBarTitleText": "产品详情"
20	},	19	}
21	{	20	},
22	"path": "pages/lensDetails/lensDetails",	21	{
23	"style": {	22	"path": "pages/lensDetails/lensDetails",
24	"navigationBarTitleText": "产品详情"	23	"style": {
25	}	24	"navigationBarTitleText": "产品详情"
26	},	25	}
		26	},
		27	{
		28	"path": "pages/cart/cart",
		29	"style": {
		30	"navigationBarTitleText": "购物车"
		31	}
27	{	32	},
28	"path": "pages/purchaseLenses/purchaseLenses",	33	{
29	"style": {	34	"path": "pages/purchaseLenses/purchaseLenses",
30	"navigationBarTitleText": "产品选购"	35	"style": {
31	}	36	"navigationBarTitleText": "产品选购"
32	},	37	}
33	{	38	},
34	"path": "pages/refundProgress/refundProgress",	39	{
35	"style": {	40	"path": "pages/refundProgress/refundProgress",
36	"navigationBarTitleText": "申请退款"	41	"style": {
37	}	42	"navigationBarTitleText": "申请退款"
38	},	43	}
39	{
40	"path": "pages/myOrder/myOrder",
41	"style": {
42	"navigationBarTitleText": "我的订单"
43	}
44	},	44	},
45	{	45	{
46	"path": "pages/addAddress/addAddress",	46	"path": "pages/addAddress/addAddress",
47	"style": {	47	"style": {
48	"navigationBarTitleText": "新增地址"	48	"navigationBarTitleText": "新增地址"
49	}	49	}
50	},	50	},
51	{	51	{
52	"path": "pages/confirmOrder/confirmOrder",	52	"path": "pages/confirmOrder/confirmOrder",
53	"style": {	53	"style": {
54	"navigationBarTitleText": "确认订单"
55	}
56	},
57	{
58	"path": "pages/user/user",
59	"style": {	54	"navigationBarTitleText": "确认订单"
60	"navigationBarTitleText": "我的"	55	}
		56	},
		57	{
		58	"path": "pages/user/user",
		59	"style": {
		60	"navigationBarTitleText": "我的"
		61	}
61	}	62	},
62	},	63	{
63	{	64	"path": "pages/refundment/refundWays"
64	"path": "pages/refundment/refundWays"	65	},
65	},	66	{
66	{	67	"path": "pages/refundment/refundment"
67	"path": "pages/refundment/refundment"	68	},
68	},	69	{
69	{	70	"path": "pages/predelivery/predelivery"
70	"path": "pages/Predelivery/Predelivery"	71	},
71	},	72	{
		73	"path": "pages/customerService/customerService",
		74	"style": {
		75	"navigationBarTitleText": "在线客服"
		76	}
		77	},
		78	{
		79	"path": "pages/myOrderPaying/myOrderPaying",
		80	"style": {
		81	"navigationBarTitleText": "我的订单"
		82	}
		83	},
		84	{
		85	"path": "pages/detailsChoiceArgs/detailsChoiceArgs",
		86	"style": {
		87	"navigationBarTitleText": "镜片名称名称"
		88	}
		89	},
		90	{
		91	"path": "pages/detailStandard/detailStandard_sun",
		92	"style": {
		93	"navigationBarTitleText": "太阳镜选购页"
72	{	94	}
73	"path": "pages/customerService/customerService"	95	},
74	},	96	{
75	{	97	"path": "pages/detailStandard/detailStandard_k",
		98	"style": {
		99	"navigationBarTitleText": "镜框选购页"
		100	}
76	"path": "pages/myOrderPaying/myOrderPaying"	101	}
77	}	102	],
78	],	103	"globalStyle": {
79	"globalStyle": {	104	"navigationBarTextStyle": "black",
80	"navigationBarTextStyle": "black",	105	"navigationBarTitleText": "uni-app",
81	"navigationBarTitleText": "uni-app",	106	"navigationBarBackgroundColor": "#F8F8F8",
82	"navigationBarBackgroundColor": "#F8F8F8",	107	"backgroundColor": "#F8F8F8"
83	"backgroundColor": "#F8F8F8"	108	},
84	},	109	"tabBar": {
85	"tabBar": {	110	"color": "#C0C4CC",
86	"color": "#C0C4CC",	111	"selectedColor": "#fa436a",
87	"selectedColor": "#fa436a",	112	"borderStyle": "black",
88	"borderStyle": "black",	113	"backgroundColor": "#ffffff",
89	"backgroundColor": "#ffffff",	114	"list": [
90	"list": [	115	{
91	{	116	"pagePath": "pages/index/index",
92	"pagePath": "pages/index/index",	117	"iconPath": "static/tab-home.png",
93	"iconPath": "static/tab-home.png",	118	"selectedIconPath": "static/tab-home-current.png",
94	"selectedIconPath": "static/tab-home-current.png",	119	"text": "首页"
95	"text": "首页"	120	},
96	},	121	{
97	{	122	"pagePath": "pages/cart/cart",
98	"pagePath": "pages/cart/cart",	123	"iconPath": "static/tab-cart.png",
99	"iconPath": "static/tab-cart.png",	124	"selectedIconPath": "static/tab-cart-current.png",
100	"selectedIconPath": "static/tab-cart-current.png",	125	"text": "购物车"
101	"text": "购物车"	126	},
102	},	127	{
103	{	128	"pagePath": "pages/user/user",
104	"pagePath": "pages/user/user",	129	"iconPath": "static/tab-my.png",

src/pages/Predelivery/Predelivery.vue

View file @bbdb26d

1	<template>	File was deleted
2	<view class="container">
3	<view v-for="(items) in form" :key="items.key" class="order">
4	<view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
5	<view class="order_detail">
6	<view class="detail_img"><image v-bind:src="items.img"></image></view>
7	<view class="detail_zi">
8	<view class="zi_name">{{items.name}}</view>
9	<view class="zi_standard">规格：{{items.standard}}</view>
10	<view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
11	</view>
12	</view>
13	<view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
14	<view class="clear"></view>
15	<view class="button">
16	<view class="button1">申请退款</view>
17	<view class="button2">提醒发货</view>
18	</view>
19	</view>
20	</view>
21	</template>
22
23	<script>
24	export default {
25	data(){
26	return{
27	form:[
28	{
29	key: 0,
30	name:'商品名称',
31	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
32	img: '/static/img/detail/delivery.png',
33	preprice: 180,
34	number:1,
35	orderNum: 2034867958596334,
36	nowprice: 110,
37	}
38	]
39
40	}
41	}
42	}
43	</script>
44
45	<style lang="scss">
46	.container{
47	width: 100%;
48	height: 100%;
49	background: #F2F2F2;
50	height: 700px;
51	//要获取屏幕大小
52	}
53	.order{
54	background: #FFFFFF;
55	width: 90%;
56	height: 450rpx;
57	margin: 0 auto;
58	padding: 40rpx;
59	box-sizing: border-box;
60	border-radius: 5px;
61	}
62	.order_number{
63	color: #999999;
64	font-size: 12px;
65	font-family: "PingFangSC-Regular";
66	span{
67	font-family: PingFangSC-Regular;
68	font-size: 14px;
69	color: #FF6B4A;
70	letter-spacing: -0.26px;
71	line-height: 18px;
72	float: right;
73	}
74	}
75	.order_detail{
76	display: flex;
77	justify-content: space-around;
78	margin-top: 12px;
79	}
80	.detail_img image{
81	width: 188rpx;
82	height: 188rpx;
83	}
84	.detail_zi{
85	font-family: PingFangSC-Regular;
86	width: 55%;
87	height: 100%;
88	view{
89	margin-bottom: 20rpx;
90	}
91	.zi_name{
92	font-size: 14px;
93	color: #333333;
94	letter-spacing: -0.26px;
95	line-height: 18px;
96	}
97	.zi_standard{
98	font-size: 12px;
99	color: #999999 ;
100	}
101	.zi_preprice{
102	font-size: 14px;
103	color: #FF6B4A;
104	span{
105	float: right;
106	font-size: 12px;
107	color: #999999;
108	}
109	}
110	}
111	.now_price{
112	font-size: 14px;
113	color: #333333;
114	float: right;
115	span{
116	font-size: 14px;
117	color: #FF6B4A ;
118	}
119	}
120	.clear{
121	clear: both;
122	}
123	.button{
124	display: flex;
125	justify-content: flex-end;
126	margin-top: 14px;
127	view{
128	width: 156rpx;
129	height: 48rpx;
130	border-radius: 12px;
131	font-size: 12px;
132	text-align: center;
133	line-height: 20px;
134	}
135	.button1{
136	border: 1px solid #FF6B4A;
137	font-family: PingFangSC-Regular;
138	color: #FF6B4A;
139	letter-spacing: -0.23px;
140	margin-right: 30rpx;
141	}
142	.button2{
143	border: 1px solid #FF6B4A;
144	background: #FF6B4A;
145	font-family: PingFangSC-Regular;
146	color: #FFFFFF;
147	letter-spacing: -0.23px;
148
149	}
150	}
151	</style>

src/pages/cart/cart.vue

Diff comments View file @f1da24f

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<checkbox-group name="">	3
4	<label>	4	<view class="card">
5	<view class="card">	5	<view class="cardHeader">
6	<view class="cardHeader">	6	<!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
7	<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/>	7	<block v-if="pIsoPen">
8	<image src="../../static/customerService-btn.png" mode="aspectFill"></image>	8	<view class="partentChecked" @click="pChange(pIsoPen)">
9	<text>非常戴镜</text>	9	<span class="status correct"></span>
10	</view>	10	</view>
11	<view class="cardBody">	11	</block>
12	<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />	12	<block v-else>
13	<view class="goodInfo">	13	<view class="partentCheck" @click="pChange(pIsoPen)"></view>
14	<view class="imageWrap">	14	</block>
15	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>	15	<image src="../../static/store.png" mode="aspectFill"></image>
16	</view>	16	<text>非常戴镜</text>
17	<view class="infoRight">	17	</view>
18	<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>	18
19	<view class="describ"><text>支持7天无理由退货顺丰发货支持7天无理由退货顺丰发货支持7天无理由退货顺丰发货</text>	19	<view class="cardBody">
20	<!-- <text class="icon">></text> -->	20	<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
21	</view>	21	<template v-if="childIsOpen.child1">
22	<view class="priceBox">	22	<view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
23	<view class="price">￥198</view>	23	<span class="status correct"></span>
24	<text>(限购{{maxCount}}副)</text>	24	</view>
25	<view class="counter">	25	</template>
26	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>	26	<template v-else>
27	<text>{{count}}</text>	27	<view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
28	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>	28	</template>
29	</view>	29	<view class="goodInfo">
30	</view>	30	<view class="imageWrap">
		31	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
		32	</view>
		33	<view class="infoRight">
		34	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
		35	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>
		36	<!-- <text class="icon">></text> -->
		37	</view>
		38	<view class="priceBox">
		39	<view class="price">￥{{198}}</view>
		40	<text>(限购{{maxCount}}副)</text>
		41	<view class="counter">
		42	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
		43	<text>{{count}}</text>
		44	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
31	</view>	45	</view>
32	</view>	46	</view>
33	</view>	47	</view>
34	</view>	48	</view>
35	</label>	49	</view>
36	</checkbox-group>	50	<view class="cardBody">
37		51	<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
		52	<template v-if="childIsOpen.child2">
		53	<view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
		54	<span class="status correct"></span>
		55	</view>
		56	</template>
		57	<template v-else>
		58	<view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
		59	</template>
		60	<view class="goodInfo">
		61	<view class="imageWrap">
		62	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
		63	</view>
		64	<view class="infoRight">
		65	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
		66	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>
		67	<!-- <text class="icon">></text> -->
		68	</view>
		69	<view class="priceBox">
		70	<view class="price">￥198</view>
		71	<text>(限购{{maxCount}}副)</text>
		72	<view class="counter">
		73	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
		74	<text>{{count}}</text>
		75	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
		76	</view>
		77	</view>
		78	</view>
		79	</view>
		80	</view>
		81	</view>
38		82
39	<view class="footer">	83	<view class="footer">
40	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	84	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
41	<view class="footerRight">	85	<view class="footerRight">
42	<view class="paybtn">立即支付</view>	86	<navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
		87	<view class="paybtn">立即支付</view>
		88	</navigator>
43	</view>	89	</view>
44	</view>	90	</view>
		91
45	</view>	92	</view>
46	</template>	93	</template>
47		94
48	<script>	95	<script>
49	export default {	96	export default {
		97
50	data() {	98	data() {
51	return {	99	return {
52	totalPrice: 360,	100	totalPrice: 360,
53	count:1,	101	count:1,
54	maxCount:20,	102	maxCount:20,
		103	pIsoPen: false,
		104	childIsOpen:{
		105	"child1":true,
		106	"child2":true
		107	},
55	}	108	}
56	},	109	},
57	onLoad() {	110	onLoad() {
58		111
59	},	112	}
		113	,
60	methods: {	114	methods: {
61	counter(isadd){	115	counter(isadd){
62	if(isadd){	116	if(isadd){
63	this.count >= this.maxCount? this.addDisabled = true:this.count++;	117	this.count >= this.maxCount? this.addDisabled = true:this.count++;
64	}else{	118	}else{
65	this.count <= 1? this.desDisabled = true:this.count--;	119	this.count <= 1? this.desDisabled = true:this.count--;
66	}	120	}
67	},	121	},
		122	pChange(isopen){
		123	// console.log(isopen)
		124	this.pIsoPen=!isopen
		125	this.childIsOpen.child1=!isopen
		126	this.childIsOpen.child2=!isopen
		127	},
		128	cChange(isopen,child){
		129	// console.log(child)
		130	if(child==='child1'){
		131	this.childIsOpen.child1=!isopen
		132	}
		133	if(child==='child2'){
		134	this.childIsOpen.child2=!isopen
		135	}
		136	}
68	}	137	}
69	}	138	}
70	</script>	139	</script>
71		140
72	<style lang="scss">	141	<style lang="scss">
73	.content {	142	.content {
74	min-height: 100vh;	143	min-height: 100vh;
75	background-color: #F7F6F6;	144	background-color: #f2f2f2;
76	display: flex;	145	display: flex;
77	flex-direction: column;	146	flex-direction: column;
78	align-items: center;	147	align-items: center;
79	justify-content: space-between;	148	justify-content: space-between;
80	padding: 20rpx 40rpx;	149	padding: 20rpx 40rpx;
81	box-sizing: border-box;	150	box-sizing: border-box;
82		151
		152	.partentCheck{
		153	width: 16px;
		154	height: 16px;
		155	border-radius: 18px;
		156	border: 1px solid #CFCFCF;
		157	background-color: #FFFFFF;
		158	}
		159	.partentChecked{
		160	width: 18px;
		161	height: 18px;
		162	border-radius: 18px;
		163	background-color: #FF6B4A;
		164	.correct {
		165	display: inline-block;
		166	width: 5px;
		167	height: 1px;
		168	background: #FFFFFF;
		169	line-height: 0;
		170	font-size: 0;
		171	position: relative;
		172	top: -6px;
		173	left: 4px;
		174	-webkit-transform: rotate(45deg);
		175	}
		176	.correct:after {
		177	content: '/';
		178	display: block;
		179	width: 8px;
		180	height: 1px;
		181	background: #FFFFFF;
		182	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
		183	}
		184	}
		185
83	.card{	186	.card{
84	background-color: #FFFFFF;	187	background-color: #FFFFFF;
85	border-radius: 16rpx;	188	border-radius: 16rpx;
86	box-sizing: border-box;	189	box-sizing: border-box;
87	padding: 36rpx 36rpx 36rpx 18rpx;	190	padding: 36rpx 36rpx 36rpx 18rpx;
88	display: flex;	191	display: flex;
89	flex-direction: column;	192	flex-direction: column;
90	align-items: center;	193	align-items: center;
91	justify-content: space-between;	194	justify-content: space-between;
92	.cardHeader{	195	.cardHeader{
93	width: 100%;	196	width: 100%;
94	height: 36rpx;	197	height: 36rpx;
95	display: flex;	198	display: flex;
96	align-items: center;	199	align-items: center;
97	justify-content: flex-start;	200	justify-content: flex-start;
98	image{	201	image{
99	height: 32rpx;	202	height: 32rpx;
100	width: 32rpx;	203	width: 32rpx;
		204	padding-left: 6px;
		205	padding-right: 10px;
		206	}
		207	text{
		208	// font-family: PingFangSC-Regular;
		209	font-size: 14px;
		210	color: #333333;
		211	letter-spacing: -0.26px;
101	}	212	}
102	}	213	}
103	.cardBody{	214	.cardBody{
104	width: 100%;	215	width: 100%;
105	height: 300rpx;	216	height: 300rpx;
106	display: flex;	217	display: flex;
107	align-items: center;	218	align-items: center;
108	justify-content: space-between;	219	justify-content: space-between;
109	.goodInfo{	220	.goodInfo{
110	width: 95%;	221	width: 95%;
111	display: flex;	222	display: flex;
112	flex-direction: row;	223	flex-direction: row;
113	justify-content: flex-start;	224	justify-content: flex-start;
		225	padding-left: 6px;
114	.imageWrap{	226	.imageWrap{
115	height: 188rpx;	227	height: 188rpx;
116	width: 188rpx;	228	width: 188rpx;
117	margin-right: 28rpx;	229	margin-right: 28rpx;
118	image{	230	image{
		231	border-radius: 4px;
119	height: 188rpx;	232	height: 188rpx;
120	width: 188rpx;	233	width: 188rpx;
121	}	234	}
122	}	235	}
123	.infoRight{	236	.infoRight{
124	display: flex;	237	display: flex;
125	flex-direction: column;	238	flex-direction: column;
126	align-items: flex-start;	239	align-items: flex-start;
127	justify-content: space-between;	240	justify-content: space-between;
128	height: 220rpx;	241	height: 240rpx;
129	.goodName{	242	.goodName{
130	font-size: 28rpx;	243	font-size: 28rpx;
131	color: #333333;	244	color: #333333;
132	}	245	}
133	.describ{	246	.describ{
134	width: 100%;	247	width: 100%;
135	height: 80rpx;	248	height: 80rpx;
136	box-sizing: border-box;	249	box-sizing: border-box;
137	padding: 10rpx;	250	padding: 10rpx;
138	font-size: 20rpx;	251	font-size: 20rpx;
139	color: #999999;	252	color: #999999;
140	background: #F2F2F2;	253	background: #F2F2F2;
141	text{	254	text{
142	text-overflow: -o-ellipsis-lastline;	255	text-overflow: -o-ellipsis-lastline;
143	overflow: hidden;	256	overflow: hidden;
144	text-overflow: ellipsis;	257	text-overflow: ellipsis;
145	display: -webkit-box;	258	display: -webkit-box;
146	-webkit-line-clamp: 2;	259	-webkit-line-clamp: 2;
147	line-clamp: 2;	260	line-clamp: 2;
148	-webkit-box-orient: vertical;	261	-webkit-box-orient: vertical;
149	}	262	}
150	// .icon{	263	// .icon{
151	// transform: rotate(90deg);	264	// transform: rotate(90deg);
152	// }	265	// }
153	}	266	}
154	.priceBox{	267	.priceBox{
155	display: flex;	268	display: flex;
156	justify-content: space-between;	269	justify-content: space-between;
157	align-items: center;	270	align-items: center;
		271	// margin-top: 26px;
158	width: 100%;	272	width: 100%;
159	font-size: 14px;	273	font-size: 14px;
160	color: #999999;	274	color: #999999;
161	.price{	275	.price{
162	color: #FF6B4A;	276	color: #FF6B4A;
163	font-size: 28rpx;	277	font-size: 28rpx;
164	}	278	}
165	.counter{	279	.counter{
166	display: flex;	280	display: flex;
167	flex-direction: row;	281	flex-direction: row;
168	justify-content: space-between;	282	justify-content: space-between;
169	align-items: center;	283	align-items: center;
170	font-size: 28rpx;	284	font-size: 28rpx;
171	color: #333333;	285	color: #333333;
172	width: 122rpx;	286	width: 122rpx;
173	.btn{	287	.btn{
174	display: flex;	288	display: flex;
175	justify-content: center;	289	justify-content: center;
176	line-height: 32rpx;	290	line-height: 32rpx;
177	height: 32rpx;	291	height: 32rpx;
178	width: 32rpx;	292	width: 32rpx;
179	background-color: #F2F2F2;	293	background-color: #F2F2F2;
180	color: #CFCFCF;	294	color: #CFCFCF;
181	}	295	}
182	}	296	}
183	}	297	}
184	}	298	}
185	}	299	}
186	}	300	}
187	}	301	}
188		302
189	.footer{	303	.footer{
190	position: fixed;	304	position: fixed;
191	left: 0;	305	left: 0;
192	bottom: 0;	306	bottom: 0px;
193	height: 112rpx;	307	height: 112rpx;
194	width: 100%;	308	width: 100%;
195	background-color: #FFFFFF;	309	background-color: #FFFFFF;
196	font-size: 16px;	310	font-size: 16px;
197	display: flex;	311	display: flex;
198	justify-content: space-between;	312	justify-content: space-between;
199	align-items: center;	313	align-items: center;
200	.footerLeft{	314	.footerLeft{
201	display: flex;	315	display: flex;
202	justify-content: center;	316	justify-content: center;
203	align-items: center;	317	align-items: center;
204	width: 50%;	318	width: 50%;
205	color: #333333;	319	color: #333333;
206	text{	320	text{
207	color: #FF6B4A;	321	color: #FF6B4A;
208	}	322	}
209	}	323	}
210	.footerRight{	324	.footerRight{
211	display: flex;	325	display: flex;
212	justify-content: flex-end;	326	justify-content: flex-end;
213	align-items: center;	327	align-items: center;
214	width: 50%;	328	width: 50%;
215	margin-right: 26rpx;	329	margin-right: 26rpx;
216	.paybtn{	330	.paybtn{
217	display: flex;	331	display: flex;
218	justify-content: center;	332	justify-content: center;
219	align-items: center;	333	align-items: center;
220	background: #FF6B4A;	334	background: #FF6B4A;
221	border-radius: 20px;	335	border-radius: 20px;
222	border-radius: 20px;	336	border-radius: 20px;
223	color: #FFFFFF;	337	color: #FFFFFF;
224	width: 204rpx;	338	width: 204rpx;
225	height: 80rpx;	339	height: 80rpx;
226	}	340	}
227	}	341	}
228		342
229	}	343	}
230	}	344	}
231		345
		346
		347
232	</style>	348	</style>
233		349

src/pages/detailStandard/detailStandard_k.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="container">
	3	<view class="detail">
	4	<view class="detail1"><image v-bind:src="detail.image"></image></view>
	5	<view class="detail2">
	6	<view class="detail2_name">{{detail.name}}</view>
	7	<view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
	8	<view class="detail2_price"><span>￥{{detail.price}}</span></view>
	9	</view>
	10	</view>
	11	<view class="choose">
	12	<view class="colour">
	13	<view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
	14	<view class="colour_exp">*黑色 BHL192345</view>
	15	<view class="colour2">
	16	<view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
	17	</view>
	18	<hr/>
	19	</view>
	20	<view class="size">
	21	<view class="size1">
	22	<view class="size1_1">框架尺寸</view>
	23	<view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
	24	</view>
	25	<view class="size2">
	26	<view>通用</view>
	27	<view>定制</view>
	28	</view>
	29	<view class="D3_list">
	30	<view v-for="(item) in parameter" :key="item.key">
	31	<view><image class="D3_image" v-bind:src = "item.img"></image></view>
	32	<view class="D3_list_jDu">
	33	<!-- uni-sliper插件 -->
	34	<c-progress class="c-progress"
	35	:percent="item.percent"
	36	:show-slider="false" :width="190"
	37	:standard="item.standard_l"
	38	:stand_width="item.slength"
	39	progressColor="#FF6B4A"
	40	/>
	41	<view>{{item.standard}}</view>
	42	</view>
	43	</view>
	44	<hr/>
	45	</view>
	46	</view>
	47	<view class="part">
	48	<view class="size1">
	49	<view class="size1_1">配件</view>
	50	<view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
	51	</view>
	52	<view class="colour_exp">*0290</view>
	53	<view class="part_som">
	54	<view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
	55	</view>
	56	</view>
	57	</view>
	58	<view class="buy">
	59	<view class="buy1">选了镜框，想选镜片？</view>
	60	<view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
	61	<view class="buy3">
	62	<view class="buy3_1">暂时不选</view>
	63	<view class="buy3_2">立即去选</view>
	64	</view>
	65	</view>
	66	<view class="zhanwei"></view>
	67	<view class="button"><view>立即结算</view></view>
	68	</view>
	69	</template>
	70	<script>
	71	import CProgress from '../../components/UniSliper/UniSliper'
	72
	73	export default {
	74	components: {
	75	CProgress
	76	},
	77	data(){
	78	return{
	79	detail:{
	80	image:'/static/img/detail/d1.png',
	81	name:'商品名称商品名称商品名称商品名称商品名称',
	82	price: 180,
	83	number: 1,
	84	},
	85	//框架颜色
	86	colour:[
	87	{key:0 ,img: '/static/img/detail/Kuang/s1.png'},
	88	{key:1 ,img: '/static/img/detail/Kuang/s2.png'},
	89	{key:2 ,img: '/static/img/detail/Kuang/s3.png'},
	90	{key:3 ,img: '/static/img/detail/Kuang/s4.png'},
	91	{key:4 ,img: '/static/img/detail/Kuang/s5.png'},
	92	{key:5 ,img: '/static/img/detail/Kuang/s6.png'},
	93	{key:6 ,img: '/static/img/detail/Kuang/s7.png'}
	94	],
	95	//规格
	96	parameter:[
	97	{key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
	98	{key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
	99	{key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
	100	{key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
	101	{key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
	102	],
	103	//配饰
	104	part:[
	105	{key: 0,img:'/static/img/detail/Kuang/g1.png'},
	106	{key: 1,img:'/static/img/detail/Kuang/g1.png'},
	107	{key: 2,img:'/static/img/detail/Kuang/g2.png'},
	108	{key: 3,img:'/static/img/detail/Kuang/g1.png'},
	109	{key: 4,img:'/static/img/detail/Kuang/g1.png'},
	110	{key: 5,img:'/static/img/detail/Kuang/g3.png'},
	111	{key: 6,img:'/static/img/detail/Kuang/g3.png'},
	112	{key: 7,img:'/static/img/detail/Kuang/g2.png'},
	113	],
	114	}
	115	}
	116	}
	117	</script>
	118
	119	<style lang="scss">
	120	.container{
	121	min-height: 100vh;
	122	background: #F2F2F2;
	123	padding-top: 10px;
	124	box-sizing: border-box;
	125	}
	126	hr{
	127	border: none;
	128	height: 1px;
	129	background: #F2F2F2;
	130	margin-top: 18px;
	131	}
	132	.detail{
	133	height: 272rpx;
	134	background: #FFFFFF;
	135	border-radius: 8px;
	136	padding: 16px;
	137	box-sizing: border-box;
	138	display: flex;
	139	justify-content: space-between;
	140	align-items: center;
	141	}
	142	.detail1{
	143	height: 188rpx;
	144	width: 188rpx;
	145	image{
	146	width: 100%;
	147	height: 100%;
	148	border-radius: 8px;
	149	}
	150	}
	151	.detail2{
	152	width: 68%;
	153	view{
	154	margin-bottom: 8px;
	155	font-family: PingFangSC-Regular;
	156	}
	157	.detail2_name{
	158	font-size: 14px;
	159	color: #333333;
	160	letter-spacing: -0.26px;
	161	line-height: 18px;
	162	}
	163	.detail2_tui{
	164	font-size: 10px;
	165	color: #999999;
	166	letter-spacing: -0.19px;
	167	span{
	168	margin-right: 10px;
	169	}
	170	}
	171	.detail2_price{
	172	font-size: 14px;
	173	color: #FF6B4A;
	174	letter-spacing: -0.26px;
	175	}
	176	}
	177	.choose{
	178	background: #FFFFFF;
	179	padding: 16px;
	180	box-sizing: border-box;
	181	margin-top: 10px;
	182	border-radius: 8px;
	183	.colour1{
	184	span{
	185	font-family: PingFangSC-Medium;
	186	font-size: 16px;
	187	color: #333333;
	188	letter-spacing: -0.3px;
	189	text-align: justify;
	190	line-height: 24px;
	191	font-weight: bold;
	192	}
	193	image{
	194	float: right;
	195	width: 40rpx;
	196	height: 36rpx;
	197	}
	198	}
	199	.colour_exp{
	200	font-family: PingFangSC-Regular;
	201	font-size: 12px;
	202	color: #666666;
	203	letter-spacing: 0;
	204	margin-top: 10px;
	205	margin-bottom: 10px;
	206	}
	207	.colour2{
	208	display: grid;
	209	grid-template-columns: repeat(5, 17%);
	210	justify-content: space-between ;
	211	grid-row-gap: 10px;
	212	margin-bottom: 14px;
	213	view{
	214	border: 1px solid #F2F2F2;
	215	image{
	216	width: 100%;
	217	height: 100%;
	218	}
	219	}
	220	view:hover{
	221	border: 1px solid #FF6B4A;
	222	}
	223	}
	224	}
	225	.size,.part{
	226	margin-top:14px;
	227	.size1{
	228	display: flex;
	229	justify-content: space-between;
	230	margin-bottom: 10px;
	231	.size1_1{
	232	font-weight: bold;
	233	font-family: PingFangSC-Medium;
	234	font-size: 16px;
	235	color: #333333;
	236	letter-spacing: -0.3px;
	237	line-height: 24px;
	238	}
	239	view{
	240	span{
	241	font-family: PingFangSC-Regular;
	242	font-size: 14px;
	243	color: #FF6B4A;
	244	letter-spacing: -0.26px;
	245	margin-right: 12px;
	246	}
	247	image{
	248	width: 40rpx;
	249	height: 36rpx;
	250	}
	251	}
	252	}
	253	.size2{
	254	view{
	255	display: inline-flex;
	256	align-items: center;
	257	justify-content: center; //字体居中
	258	margin-right: 12px;
	259	margin-bottom: 20px;
	260	width: 136rpx;
	261	height: 60rpx;
	262	background: #F2F2F2;
	263	border-radius: 2px;
	264	font-family: PingFangSC-Regular;
	265	font-size: 12px;
	266	color: #666666;
	267	}
	268	view:hover{
	269	color: #FF6B4A;
	270	background: rgba(255,107,74,0.15);
	271	}
	272	}
	273	.D3_list{
	274	margin-bottom: 4px;
	275	}
	276	.D3_list>view{
	277	display: flex;
	278	align-content: center;
	279	margin-bottom: 10px;
	280	view{
	281	margin-right: 10px;
	282	}
	283	}
	284	.D3_list image{
	285	width: 50px;
	286	height: 25px;
	287	margin-right: 6px;
	288	}
	289	.D3_list span{
	290	margin-left: 6px;
	291	margin-right: 5px;
	292	font-family: 'PingFangSC-Regular';
	293	}
	294	.D3_list_jDu{
	295	view{
	296	font-family: PingFangSC-Regular;
	297	font-size: 10px;
	298	color: #999999;
	299	letter-spacing: -0.19px;
	300	}
	301	}
	302	}
	303	.part{
	304	.part_som{
	305	display: grid;
	306	justify-content: space-between;
	307	grid-template-columns: repeat(4, 22%);
	308	grid-row-gap: 12px;
	309	margin-bottom: 14px;
	310	view{
	311	border: 1px solid #F2F2F2;
	312	height: 72rpx;
	313	image{
	314	width: 100%;
	315	height: 100%;
	316	}
	317	}
	318	view:hover{
	319	border: 1px solid #FF6B4A;
	320	}
	321	}
	322	}
	323	.buy{
	324	height: 280rpx;
	325	background: #FFFFFF ;
	326	margin-top: 10px;
	327	border-radius: 8px;
	328	padding-top: 20px;
	329	box-sizing: border-box;
	330	margin-bottom: 20px;
	331	}
	332	.buy1{
	333	font-family: PingFangSC-Medium;
	334	font-size: 16px;
	335	font-weight: bold;
	336	color: #333333;
	337	text-align: center;
	338	}
	339	.buy2{
	340	font-family: PingFangSC-Regular;
	341	font-size: 12px;
	342	color: #999999;
	343	text-align: center;
	344	margin: 10px;
	345	}
	346	.buy3{
	347	font-family: PingFangSC-Regular;
	348	font-size: 16px;
	349	display: flex;
	350	justify-content: center;
	351	margin-top: 14px;
	352	view{
	353	border-radius: 20px;
	354	width: 240rpx;
	355	height: 80rpx;
	356	display: flex;
	357	justify-content: center;
	358	align-items: center;
	359	}
	360	.buy3_1{
	361	margin-right: 20px;
	362	background: rgba(255,107,74,0.15);
	363	color: #FF6B4A ;
	364	}
	365	.buy3_2{
	366	background: #FF6B4A;
	367	color: #FFFFFF ;
	368	}
	369	}
	370	.zhanwei{
	371	background: #F2F2F2;
	372	height: 120rpx;
	373	}
	374	.button{
	375	position: fixed;
	376	bottom: 0;
	377	width:100%;
	378	height: 112rpx;
	379	background: #FF6B4A 100%;
	380	view{
	381	color: #FFFFFF;
	382	height: 100%;
	383	display: flex;
	384	justify-content: center;
	385	align-items: center;
	386	font-family: PingFangSC-Regular;
	387	font-size: 16px;
	388	}
	389	}
	390	</style>

src/pages/detailStandard/detailStandard_sun.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="container">
	3	<view class="detail">
	4	<view class="detail1"><image v-bind:src="detail.image"></image></view>
	5	<view class="detail2">
	6	<view class="detail2_name">{{detail.name}}</view>
	7	<view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
	8	<view class="detail2_price"><span>￥{{detail.price}}</span></view>
	9	</view>
	10	</view>
	11	<view class="choose">
	12	<view class="colour">
	13	<view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
	14	<view class="colour_exp">*黑色 BHL192345</view>
	15	<view class="colour2">
	16	<view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
	17	</view>
	18	<hr/>
	19	</view>
	20	<view class="colour">
	21	<view class="colour1"><span>镜片颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
	22	<view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
	23	<view class="jp_colour2">
	24	<view class="jp_colour" v-for="(colours) in jp" :key="colours.key"><image v-bind:src="colours.img"></image></view>
	25	</view>
	26	<hr/>
	27	</view>
	28	<view class="split">
	29	<view class="split1">
	30	<span>折射率</span>
	31	<span class="split1_span">注：折射率越高，镜片越薄，看起来更美观。</span>
	32	<image src="/static/img/detail/xiala2.png"></image>
	33	</view>
	34	<view class="split2">
	35	<view class="split2_number">0-300度</view>
	36	<view class="split2_choose"><view class="split2_tui">1.56（推荐）</view><view>1.60</view></view>
	37	</view>
	38	<view class="split2">
	39	<view class="split2_number">300-1000度</view>
	40	<view class="split2_choose"><view class="split2_tui">1.71（推荐）</view>
	41	<view>1.67</view><view>1.74</view><view>1.80</view><view>1.71</view></view>
	42	</view>
	43	<hr/>
	44	</view>
	45	<view class="size">
	46	<view class="size1">
	47	<view class="size1_1">框架尺寸</view>
	48	<view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
	49	</view>
	50	<view class="size2">
	51	<view>通用</view>
	52	<view>定制</view>
	53	</view>
	54	<!-- uni-sliper插件 -->
	55	<view class="D3_list">
	56	<view v-for="(item) in parameter" :key="item.key">
	57	<view><image class="D3_image" v-bind:src = "item.img"></image></view>
	58	<view class="D3_list_jDu">
	59	<c-progress class="c-progress"
	60	:percent="item.percent"
	61	:show-slider="false" :width="190"
	62	:standard="item.standard_l"
	63	:stand_width="item.slength"
	64	progressColor="#FF6B4A"
	65	/>
	66	<view>{{item.standard}}</view>
	67	</view>
	68	</view>
	69	<hr/>
	70	</view>
	71	</view>
	72	<view class="part">
	73	<view class="size1">
	74	<view class="size1_1">配件</view>
	75	<view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
	76	</view>
	77	<view class="colour_exp">*0290</view>
	78	<view class="part_som">
	79	<view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
	80	</view>
	81	</view>
	82	</view>
	83	<view class="buy">
	84	<view class="buy1">选了镜框，想选镜片？</view>
	85	<view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
	86	<view class="buy3">
	87	<view class="buy3_1">暂时不选</view>
	88	<view class="buy3_2">立即去选</view>
	89	</view>
	90	</view>
	91	<view class="zhanwei"></view>
	92	<view class="button"><view>立即结算</view></view>
	93	</view>
	94	</template>
	95	<script>
	96	import CProgress from '../../components/UniSliper/UniSliper'
	97
	98	export default {
	99	components: {
	100	CProgress
	101	},
	102	data(){
	103	return{
	104	detail:{
	105	image:'/static/img/detail/sun_glass.png',
	106	name:'商品名称商品名称商品名称商品名称商品名称',
	107	price: 180,
	108	number: 1,
	109	},
	110	//框架颜色
	111	colour:[
	112	{key:0 ,img: '/static/img/detail/Kuang/s1.png'},
	113	{key:1 ,img: '/static/img/detail/Kuang/s2.png'},
	114	{key:2 ,img: '/static/img/detail/Kuang/s3.png'},
	115	{key:3 ,img: '/static/img/detail/Kuang/s4.png'},
	116	{key:4 ,img: '/static/img/detail/Kuang/s5.png'},
	117	{key:5 ,img: '/static/img/detail/Kuang/s6.png'},
	118	{key:6 ,img: '/static/img/detail/Kuang/s7.png'}
	119	],
	120	//镜片颜色
	121	jp:[
	122	{key:0 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	123	{key:1 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	124	{key:2 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	125	{key:3 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	126	{key:4 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	127	{key:5 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	128	{key:6 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	129	{key:7 ,img: '/static/img/detail/Kuang/sun_jp.png'},
	130	{key:8 ,img: '/static/img/detail/Kuang/sun_jp.png'}
	131	],
	132	//规格参数
	133	parameter:[
	134	{key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
	135	{key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
	136	{key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
	137	{key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
	138	{key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
	139	],
	140	//配饰
	141	part:[
	142	{key: 0,img:'/static/img/detail/Kuang/g1.png'},
	143	{key: 1,img:'/static/img/detail/Kuang/g1.png'},
	144	{key: 2,img:'/static/img/detail/Kuang/g2.png'},
	145	{key: 3,img:'/static/img/detail/Kuang/g1.png'},
	146	{key: 4,img:'/static/img/detail/Kuang/g1.png'},
	147	{key: 5,img:'/static/img/detail/Kuang/g3.png'},
	148	{key: 6,img:'/static/img/detail/Kuang/g3.png'},
	149	{key: 7,img:'/static/img/detail/Kuang/g2.png'},
	150
	151	],
	152	}
	153	}
	154	}
	155	</script>
	156
	157	<style lang="scss">
	158	.container{
	159	min-height: 100vh;
	160	background: #F2F2F2;
	161	padding-top: 10px;
	162	box-sizing: border-box;
	163	}
	164	hr{
	165	border: none;
	166	height: 1px;
	167	background: #F2F2F2;
	168	margin-top: 18px;
	169	}
	170	.detail{
	171	height: 272rpx;
	172	background: #FFFFFF;
	173	border-radius: 8px;
	174	padding: 16px;
	175	box-sizing: border-box;
	176	display: flex;
	177	justify-content: space-between;
	178	align-items: center;
	179	}
	180	.detail1{
	181	height: 188rpx;
	182	width: 188rpx;
	183	image{
	184	width: 100%;
	185	height: 100%;
	186	border-radius: 8px;
	187	}
	188	}
	189	.detail2{
	190	width: 68%;
	191	view{
	192	margin-bottom: 8px;
	193	font-family: PingFangSC-Regular;
	194	}
	195	.detail2_name{
	196	font-size: 14px;
	197	color: #333333;
	198	letter-spacing: -0.26px;
	199	line-height: 18px;
	200	}
	201	.detail2_tui{
	202	font-size: 10px;
	203	color: #999999;
	204	letter-spacing: -0.19px;
	205	span{
	206	margin-right: 10px;
	207	}
	208	}
	209	.detail2_price{
	210	font-size: 14px;
	211	color: #FF6B4A;
	212	letter-spacing: -0.26px;
	213	}
	214	}
	215	.choose{
	216	background: #FFFFFF;
	217	padding: 16px;
	218	box-sizing: border-box;
	219	margin-top: 10px;
	220	border-radius: 8px;
	221	.colour1{
	222	span{
	223	font-family: PingFangSC-Medium;
	224	font-size: 16px;
	225	color: #333333;
	226	letter-spacing: -0.3px;
	227	text-align: justify;
	228	line-height: 24px;
	229	font-weight: bold;
	230	}
	231	image{
	232	float: right;
	233	width: 40rpx;
	234	height: 36rpx;
	235	}
	236	}
	237	.colour_exp{
	238	font-family: PingFangSC-Regular;
	239	font-size: 12px;
	240	color: #666666;
	241	letter-spacing: 0;
	242	margin-top: 10px;
	243	margin-bottom: 10px;
	244	}
	245	.colour2{
	246	display: grid;
	247	grid-template-columns: repeat(5, 17%);
	248	justify-content: space-between ;
	249	grid-row-gap: 10px;
	250	margin-bottom: 14px;
	251	view{
	252	border: 1px solid #F2F2F2;
	253	image{
	254	width: 100%;
	255	height: 100%;
	256	}
	257	}
	258	view:hover{
	259	border: 1px solid #FF6B4A;
	260	}
	261	}
	262	}
	263	.jp_colour2{
	264	display: grid;
	265	grid-template-columns: repeat(6, 12%);
	266	grid-row-gap: 10px;
	267	grid-column-gap: 6px;
	268	margin-bottom: 14px;
	269	view{
	270	border: 1px solid #F2F2F2;
	271	height: 80rpx;
	272	image{
	273	width: 100%;
	274	height: 100%;
	275	}
	276	}
	277	view:hover{
	278	border: 1px solid #FF6B4A;
	279	}
	280	}
	281	.split1{
	282	span{
	283	font-family: PingFangSC-Medium;
	284	font-size: 16px;
	285	color: #333333;
	286	letter-spacing: -0.3px;
	287	text-align: justify;
	288	line-height: 24px;
	289	font-weight: bold;
	290	margin-right:8px;
	291	}
	292	.split1_span{
	293	font-family: PingFangSC-Regular;
	294	font-size: 10px;
	295	color: #999999;
	296	letter-spacing: -0.3px;
	297	font-weight:normal;
	298	}
	299	image{
	300	float: right;
	301	width: 40rpx;
	302	height: 36rpx;
	303	}
	304	}
	305	.split2{
	306	margin-bottom: 12px;
	307	.split2_number{
	308	font-family: PingFangSC-Regular;
	309	font-size: 10px;
	310	color: #999999;
	311	letter-spacing: -0.19px;
	312	margin-bottom: 6px;
	313	}
	314	.split2_choose{
	315	display: flex;
	316	view{
	317	display: flex;
	318	justify-content: center;
	319	align-items: center;
	320	font-family: PingFangSC-Regular;
	321	font-size: 12px;
	322	color: #666666;
	323	background: #F2F2F2;
	324	width: 100rpx;
	325	height: 60rpx;
	326	border-radius: 2px;
	327	margin-right: 10px;
	328	}
	329	view:hover{
	330	color: #FF6B4A;
	331	background: rgba(255,107,74,0.15);
	332	}
	333	.split2_tui{
	334	width: 186rpx;
	335	height: 60rpx;
	336	}
	337	}
	338
	339	}
	340	.size,.part{
	341	margin-top:14px;
	342	.size1{
	343	display: flex;
	344	justify-content: space-between;
	345	margin-bottom: 10px;
	346	.size1_1{
	347	font-weight: bold;
	348	font-family: PingFangSC-Medium;
	349	font-size: 16px;
	350	color: #333333;
	351	letter-spacing: -0.3px;
	352	line-height: 24px;
	353	}
	354	view{
	355	span{
	356	font-family: PingFangSC-Regular;
	357	font-size: 14px;
	358	color: #FF6B4A;
	359	letter-spacing: -0.26px;
	360	margin-right: 12px;
	361	}
	362	image{
	363	width: 40rpx;
	364	height: 36rpx;
	365	}
	366	}
	367	}
	368	.size2{
	369	view{
	370	display: inline-flex;
	371	align-items: center;
	372	justify-content: center; //字体居中
	373	margin-right: 12px;
	374	margin-bottom: 20px;
	375	width: 136rpx;
	376	height: 60rpx;
	377	background: #F2F2F2;
	378	border-radius: 2px;
	379	font-family: PingFangSC-Regular;
	380	font-size: 12px;
	381	color: #666666;
	382	}
	383	view:hover{
	384	color: #FF6B4A;
	385	background: rgba(255,107,74,0.15);
	386	}
	387	}
	388	.D3_list{
	389	margin-bottom: 4px;
	390	}
	391	.D3_list>view{
	392	display: flex;
	393	align-content: center;
	394	margin-bottom: 10px;
	395	view{
	396	margin-right: 10px;
	397	}
	398	}
	399	.D3_list image{
	400	width: 50px;
	401	height: 25px;
	402	margin-right: 6px;
	403	}
	404	.D3_list span{
	405	margin-left: 6px;
	406	margin-right: 5px;
	407	font-family: 'PingFangSC-Regular';
	408	}
	409	.D3_list_jDu{
	410	view{
	411	font-family: PingFangSC-Regular;
	412	font-size: 10px;
	413	color: #999999;
	414	letter-spacing: -0.19px;
	415	}
	416	}
	417	}
	418	.part{
	419	.part_som{
	420	display: grid;
	421	justify-content: space-between;
	422	grid-template-columns: repeat(4, 22%);
	423	grid-row-gap: 12px;
	424	margin-bottom: 14px;
	425	view{
	426	border: 1px solid #F2F2F2;
	427	height: 72rpx;
	428	image{
	429	width: 100%;
	430	height: 100%;
	431	}
	432	}
	433	view:hover{
	434	border: 1px solid #FF6B4A;
	435	}
	436	}
	437	}
	438	.buy{
	439	height: 280rpx;
	440	background: #FFFFFF ;
	441	margin-top: 10px;
	442	border-radius: 8px;
	443	padding-top: 20px;
	444	box-sizing: border-box;
	445	margin-bottom: 20px;
	446	}
	447	.buy1{
	448	font-family: PingFangSC-Medium;
	449	font-size: 16px;
	450	font-weight: bold;
	451	color: #333333;
	452	text-align: center;
	453	}
	454	.buy2{
	455	font-family: PingFangSC-Regular;
	456	font-size: 12px;
	457	color: #999999;
	458	text-align: center;
	459	margin: 10px;
	460	}
	461	.buy3{
	462	font-family: PingFangSC-Regular;
	463	font-size: 16px;
	464	display: flex;
	465	justify-content: center;
	466	margin-top: 14px;
	467	view{
	468	border-radius: 20px;
	469	width: 240rpx;
	470	height: 80rpx;
	471	display: flex;
	472	justify-content: center;
	473	align-items: center;
	474	}
	475	.buy3_1{
	476	margin-right: 20px;
	477	background: rgba(255,107,74,0.15);
	478	color: #FF6B4A ;
	479	}
	480	.buy3_2{
	481	background: #FF6B4A;
	482	color: #FFFFFF ;
	483	}
	484	}
	485	.zhanwei{
	486	background: #F2F2F2;
	487	height: 120rpx;
	488	}
	489	.button{
	490	position: fixed;
	491	bottom: 0;
	492	width:100%;
	493	height: 112rpx;
	494	background: #FF6B4A 100%;
	495	view{
	496	color: #FFFFFF;
	497	height: 100%;
	498	display: flex;
	499	justify-content: center;
	500	align-items: center;
	501	font-family: PingFangSC-Regular;
	502	font-size: 16px;
	503	}
	504	}
	505
	506	</style>

src/pages/detailsChoiceArgs/compoents/MyCollapse.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<!-- 折叠框 -->
	3	<view class="myCollapse">
	4	<view class="head">
	5	<view>{{title}}</view>
	6	<view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
	7	<view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view>
	8	<view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view>
	9	</view>
	10	<view class="body">
	11
	12	<block v-if="isOpen">
	13
	14	<view style="background-color: #FFFFFF;" class="funBox">
	15	<block v-if="title==='镜片种类'">
	16	<view class="noRange">
	17	<block v-for="(item) in funList" :key="item.key">
	18	<view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
	19	@click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	20	</block>
	21	</view>
	22	<view class="noRange">
	23	<block v-for="(item,index) in funList2" :key="item.key">
	24	<view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'"
	25	:style="colorList[index]" @click="choice2(index,item.key-1,item.isChioce)"></view>
	26	</block>
	27	</view>
	28	</block>
	29	<block v-else>
	30	<view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view>
	31	<view class="noRange">
	32	<block v-for="(item) in funList" :key="item.key">
	33	<view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
	34	@click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
	35	</block>
	36	</view>
	37
	38	<view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
	39	<view class="noRange" style="max-width: 624rpx">
	40	<block v-for="(item,index) in funList2" :key="item.key">
	41	<view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'"
	42	@click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
	43	</block>
	44	</view>
	45	</block>
	46	</view>
	47	</block>
	48
	49	<block v-else>
	50	*<block v-for="(item,index) in funContent" :key="index">
	51	<text v-if="item!==null">{{item}}</text>
	52	</block>
	53	</block>
	54	</view>
	55	</view>
	56
	57	</template>
	58
	59	<script>
	60	export default {
	61	props:{
	62	isOpenProps:{
	63	// 是否展开，默认 true
	64	type: Boolean,
	65	default: true
	66	},
	67	funListProp:{
	68	"name":String,
	69	"isChioce": Number,
	70	"key":Number
	71	},
	72	funList2Prop:{
	73	type:Array,
	74	}
	75	,
	76	funContentProp: {
	77	type: Array
	78	},
	79	title:{
	80	type: String,
	81	default: ''
	82	}
	83	},
	84	data() {
	85	return {
	86	isOpen:this.isOpenProps,
	87	// 颜色数组要与传入的值手动相同
	88	colorList:[
	89	"background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
	90	"background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
	91	"background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
	92	"background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
	93	"background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
	94	],
	95	funList: this.funListProp,
	96	funList2: this.funList2Prop,
	97	funContent: this.funContentProp
	98	};
	99	},
	100
	101	methods:{
	102	myCollapseChange(isopen){
	103	this.isOpen = !isopen
	104	},
	105	choice(index,isChoice){
	106	this.funList[index].isChioce = !isChoice
	107	if(!isChoice){
	108	this.funContent[index] = this.funList[index].name
	109	}
	110	else{
	111	this.funContent[index] = ''
	112	}
	113	},
	114	choice2(index,conIndex,isChoice){
	115	this.funList2[index].isChioce = !isChoice
	116	if(!isChoice){
	117	this.funContent[conIndex] = this.funList2[index].name
	118	}
	119	else{
	120	this.funContent[conIndex] = ''
	121	}
	122	}
	123	}
	124	}
	125	</script>
	126
	127	<style lang="scss">
	128	.myCollapse{
	129	width: 100%;
	130	padding-bottom: 28rpx;
	131	margin-top: 7px;
	132	border-bottom: 1px solid #E9E9E9;
	133	.head{
	134	display: flex;
	135	justify-content: space-between;
	136	height: 24px;
	137	// font-family: PingFangSC-Medium;
	138	font-size: 16px;
	139	color: #333333;
	140	letter-spacing: -0.3px;
	141	text-align: justify;
	142	line-height: 24px;
	143	margin-bottom: 18rpx;
	144	.headRighted{
	145	width: 0;
	146	height: 0;
	147	border-left: 4px solid transparent;
	148	border-right: 4px solid transparent;
	149	border-bottom: 4px solid #CFCFCF;
	150	transform: scaleY(-1);
	151	margin-top: 10px;
	152	}
	153	.headMid{
	154	// font-family: PingFangSC-Regular;
	155	font-size: 10px;
	156	color: #999999;
	157	letter-spacing: -0.19px;
	158	margin-left: -120rpx;
	159	}
	160	.headRight{
	161	width: 0;
	162	height: 0;
	163	border-left: 4px solid transparent;
	164	border-right: 4px solid transparent;
	165	border-bottom: 4px solid #CFCFCF;
	166	margin-top: 10px;
	167	}
	168	}
	169	.body{
	170	// font-family: PingFangSC-Regular;
	171	font-size: 12px;
	172	color: #666666;
	173	letter-spacing: 0;
	174	display: flex;
	175	flex-wrap: wrap;
	176	text{
	177	padding-left: 4px;
	178	}
	179	}
	180	}
	181	.funBox {
	182	// display: flex;
	183	width: 100%;
	184	// flex-wrap: wrap;
	185	// max-width: 624rpx;
	186	.range{
	187	// font-family: PingFangSC-Regular;
	188	font-size: 10px;
	189	color: #999999;
	190	letter-spacing: -0.19px;
	191	margin-bottom: 5px;
	192	}
	193	.noRange{
	194	display: flex;
	195	flex-wrap: wrap;
	196	// max-width: 624rpx;
	197	// margin-bottom: 28rpx;
	198	.boxChoiced,.boxChoice{
	199	height: 60rpx;
	200	border-radius: 4rpx;
	201	// font-family: PingFangSC-Regular;
	202	font-size: 12px;
	203	letter-spacing: 0;
	204	line-height: 60rpx;
	205	box-sizing: border-box;
	206	padding: 0 20rpx;
	207	margin-right: 20rpx;
	208	margin-bottom: 13rpx;
	209	}
	210	.boxChoiced{
	211	background: rgba(255,107,74,0.15);
	212	color: #FF6B4A;
	213	}
	214	.boxChoice{
	215	background: #F2F2F2;
	216	color: #666666;
	217	}
	218	.boxChoiced-C,.boxChoice-C{
	219	width: 64rpx;
	220	height: 64rpx;
	221	border-radius: 32rpx;
	222	margin-right: 8px;
	223	}
	224	.boxChoiced-C{
	225	opacity: 0.7;
	226	border: 1px solid #FF6B4A;
	227	}
	228	.boxChoice-C{
	229	opacity: 0.7;
	230	border: 1px solid #FFFFFF;
	231	}
	232	}
	233
	234	}
	235	</style>
	236

src/pages/detailsChoiceArgs/detailsChoiceArgs.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="content">
	3	<view class="goods-info">
	4	<image src="../../static/myorder-paying-pic.png"></image>
	5	<view class="box-right">
	6	<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
	7	<text class="p2">支持7天无理由退货顺丰发货</text>
	8	<view class="priceBox">
	9	<view class="price">￥{{price*count}}</view>
	10	<view class="counter">
	11	<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
	12	<text>{{count}}</text>
	13	<view class="btn" @click="counter(true)">+</view>
	14	</view>
	15	</view>
	16	</view>
	17	</view>
	18	<view class="goods-data">
	19	<!-- 实用功能折叠框 -->
	20	<MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
	21	<MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
	22	<MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
	23	<MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
	24
	25	<view class="opCollapse">
	26	<view class="head">
	27	<view v-if="!opIsOpen">填写验光数据</view>
	28	<view v-else></view>
	29	<view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
	30	<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
	31	</view>
	32	<view class="body">
	33	<template v-if="opIsOpen">
	34
	35	<view class="goods-form">
	36	<text class="p1">填写验光数据</text>
	37	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
	38	<view class="picker" >
	39	<view class="picker-choice">
	40	<view class="choice-left">
	41	<text class="p11">{{pickerInfoList[0].nameC}}</text>
	42	<text class="p12">{{pickerInfoList[0].nameE}}</text>
	43	</view>
	44	<text class="p13">左   (OD)</text>
	45	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
	46	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
	47	<image src="../../static/detail-tabicon.png" ></image>
	48	</picker>
	49	<text class="p13">右   (OS)</text>
	50	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
	51	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
	52	<image src="../../static/detail-tabicon.png" ></image>
	53	</picker>
	54	</view>
	55	</view>
	56	<view class="picker" >
	57	<view class="picker-choice">
	58	<view class="choice-left">
	59	<text class="p11">{{pickerInfoList[1].nameC}}</text>
	60	<text class="p12">{{pickerInfoList[1].nameE}}</text>
	61	</view>
	62	<text class="p13">左   (OD)</text>
	63	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
	64	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
	65	<image src="../../static/detail-tabicon.png" ></image>
	66	</picker>
	67	<text class="p13">右   (OS)</text>
	68	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
	69	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
	70	<image src="../../static/detail-tabicon.png" ></image>
	71	</picker>
	72	</view>
	73	</view>
	74	<view class="picker" >
	75	<view class="picker-choice">
	76	<view class="choice-left">
	77	<text class="p11">{{pickerInfoList[2].nameC}}</text>
	78	<text class="p12">{{pickerInfoList[2].nameE}}</text>
	79	</view>
	80	<text class="p13">左   (OD)</text>
	81	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
	82	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
	83	<image src="../../static/detail-tabicon.png" ></image>
	84	</picker>
	85	<text class="p13">右   (OS)</text>
	86	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
	87	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
	88	<image src="../../static/detail-tabicon.png" ></image>
	89	</picker>
	90	</view>
	91	</view>
	92	<view class="picker" >
	93	<view class="picker-choice">
	94	<view class="choice-left">
	95	<text class="p11">{{pickerInfoList[3].nameC}}</text>
	96	<text class="p12">{{pickerInfoList[3].nameE}}</text>
	97	</view>
	98	<text class="p13">左   (OD)</text>
	99	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
	100	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
	101	<image src="../../static/detail-tabicon.png" ></image>
	102	</picker>
	103	<text class="p13">右   (OS)</text>
	104	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
	105	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
	106	<image src="../../static/detail-tabicon.png" ></image>
	107	</picker>
	108	</view>
	109	</view>
	110	<view class="picker" >
	111	<view class="picker-choice">
	112	<view class="choice-left">
	113	<text class="p11">{{pickerInfoList[4].nameC}}</text>
	114	</view>
	115	<text class="p13-date">年   (Y)</text>
	116	<text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
	117	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
	118	<image src="../../static/detail-tabicon.png" ></image>
	119	</picker>
	120	<text class="p13-date">月   (M)</text>
	121	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
	122	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
	123	<image src="../../static/detail-tabicon.png" ></image>
	124	</picker>
	125	<text class="p13-date">日   (D)</text>
	126	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
	127	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
	128	<image src="../../static/detail-tabicon.png" ></image>
	129	</picker>
	130	</view>
	131	</view>
	132	<view class="confirm">
	133	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
	134	<text>确认以上输入信息来源于我的验光数据!</text>
	135	</view>
	136	</view>
	137
	138	</template>
	139	<template v-else>
	140	<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
	141	<template v-if="item.nameC==='验光日期'">
	142	<text class="names">{{item.nameC}}</text>
	143	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
	144	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
	145	<text>{{item.nameArray3[item.nameIndex2]}}日</text>
	146	</template>
	147	<template v-else>
	148	<template v-if="item.nameC==='度数'">
	149	<text style="display: inline;">*</text>
	150	</template>
	151
	152	<text class="names">{{item.nameC}}</text>
	153	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
	154	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>
	155	</template>
	156	</view>
	157	</template>
	158	</view>
	159	</view>
	160
	161	</view>
	162	<view class="submit">立即结算</view>
	163	</view>
	164	</template>
	165
	166	<script>
	167	import MyCollapse from './compoents/MyCollapse.vue'
	168	export default {
	169	components: {
	170	MyCollapse
	171	},
	172	data() {
	173	return {
	174	count:1,
	175	disabled:false,
	176	price:180,
	177	// 实用功能参数
	178	funIsOpen:true, // 默认myCollapse开启
	179	funList: [
	180	{"name":"防紫外线","isChioce": false,"key":1},
	181	{"name":"防蓝光","isChioce": false,"key":2},
	182	{"name":"智能变色","isChioce": false,"key":3},
	183	{"name":"易清洁","isChioce": false,"key":4},
	184	{"name":"防辐射","isChioce": false,"key":5},
	185	{"name":"抗疲劳","isChioce": false,"key":6},
	186	],
	187	funContent:[],
	188
	189	// 镜片种类参数
	190	kindIsOpen:true,
	191	kindList1: [
	192	{"name":"染色","isChioce":false,key:1},
	193	{"name":"渐变","isChioce":false,key:2},
	194	],
	195	kindList2: [
	196	{"name":"JB234759","isChioce":false,key:3},
	197	{"name":"JB234759","isChioce":false,key:4},
	198	{"name":"JB234759","isChioce":false,key:5},
	199	{"name":"JB234759","isChioce":false,key:6},
	200	{"name":"JB234759","isChioce":false,key:7},
	201	],
	202	kindContent:[],
	203	// 材质选择
	204	maIsOpen:true,
	205	maList1: [
	206	{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
	207	{"name":"特殊镜片","isChioce":false,key:2},
	208	],
	209	maList2: [
	210	{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
	211	{"name":"玻璃镜片","isChioce":false,key:4},
	212	],
	213	maContent:[],
	214	// 折射率参数
	215	reIsOpen:true,
	216	reList1: [
	217	{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
	218	{"name":"1.60","isChioce":false,key:2},
	219	],
	220	reList2: [
	221	{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
	222	{"name":"1.67","isChioce":false,key:4},
	223	{"name":"1.71","isChioce":false,key:5},
	224	{"name":"1.74","isChioce":false,key:6},
	225	],
	226	reContent:[],
	227	// 验光参数
	228	opIsOpen:true,
	229	tablist: {
	230	// read: true,
	231	// seeLong: false,
	232	confirm: false
	233	},
	234	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
	235	// 度数相关数据
	236	pickerInfoList:[
	237	{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
	238	{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
	239	{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
	240	{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
	241	{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
	242	],
	243
	244	}
	245	},
	246	methods: {
	247	counter(isadd){
	248	if(isadd){
	249	this.count++
	250	}else{
	251	this.count <= 1? this.disabled = true:this.count--
	252	}
	253	},
	254	myCollapseChange(isopen){
	255	// console.log(isopen)
	256	this.opIsOpen = !isopen
	257	},
	258	changeConfirm() {
	259	this.tablist.confirm = !this.tablist.confirm
	260	},
	261
	262	bindPickerChange01: function(e) {
	263	this.pickerInfoList[0].nameIndex1 = e.target.value
	264	},
	265	bindPickerChange02: function(e) {
	266	this.pickerInfoList[0].nameIndex2 = e.target.value
	267	},
	268
	269	bindPickerChange11: function(e) {
	270	this.pickerInfoList[1].nameIndex1 = e.target.value
	271	},
	272	bindPickerChange12: function(e) {
	273	this.pickerInfoList[1].nameIndex2 = e.target.value
	274	},
	275
	276	bindPickerChange21: function(e) {
	277	this.pickerInfoList[2].nameIndex1 = e.target.value
	278	},
	279	bindPickerChange22: function(e) {
	280	this.pickerInfoList[2].nameIndex2 = e.target.value
	281	},
	282
	283	bindPickerChange31: function(e) {
	284	this.pickerInfoList[3].nameIndex1 = e.target.value
	285	},
	286	bindPickerChange32: function(e) {
	287	this.pickerInfoList[3].nameIndex2 = e.target.value
	288	},
	289
	290	bindPickerChange41: function(e) {
	291	this.pickerInfoList[4].nameIndex1 = e.target.value
	292	},
	293	bindPickerChange42: function(e) {
	294	this.pickerInfoList[4].nameIndex2 = e.target.value
	295	},
	296	bindPickerChange43: function(e) {
	297	this.pickerInfoList[4].nameIndex3 = e.target.value
	298	},
	299	}
	300	}
	301	</script>
	302
	303	<style lang="scss" scoped>
	304	.content{
	305	width: 100%;
	306	background-color: #F2F2F2;
	307	display: flex;
	308	flex-direction: column;
	309	align-items: center;
	310	}
	311
	312	.goods-info{
	313	width: 100%;
	314	height: 272rpx;
	315	box-sizing: border-box;
	316	padding: 40rpx 40rpx 36rpx 36rpx;
	317	margin: 36rpx 0 18rpx 0;
	318	// margin-bottom: -18rpx;
	319	// margin-top: -36rpx;
	320	background: #FFFFFF;
	321	border-radius: 16rpx;
	322	display: flex;
	323	image{
	324	width: 94px;
	325	height: 94px;
	326	margin-right: 28rpx;
	327	}
	328	.box-right{
	329	width: 458rpx;
	330	display: flex;
	331	flex-direction: column;
	332	align-items: flex-start;
	333	justify-content: space-between;
	334	.p1 {
	335	// font-family: PingFangSC-Regular;
	336	font-size: 14px;
	337	color: #333333;
	338	letter-spacing: -0.26px;
	339	text-align: justify;
	340	line-height: 18px;
	341	}
	342	.p2 {
	343	// font-family: PingFangSC-Regular;
	344	font-size: 10px;
	345	color: #999999;
	346	letter-spacing: -0.19px;
	347	margin-top: -20rpx;
	348	}
	349	.priceBox{
	350	display: flex;
	351	flex-direction: row;
	352	justify-content: space-between;
	353	width: 100%;
	354	.price{
	355	color: #FF6B4A;
	356	font-size: 28rpx;
	357	}
	358	.counter{
	359	display: flex;
	360	flex-direction: row;
	361	justify-content: space-between;
	362	font-size: 28rpx;
	363	color: #333333;
	364	width: 122rpx;
	365	.btn{
	366	display: flex;
	367	justify-content: center;
	368	line-height: 32rpx;
	369	height: 32rpx;
	370	width: 32rpx;
	371	background-color: #F2F2F2;
	372	color: #CFCFCF;
	373	}
	374	}
	375	}
	376	}
	377	}
	378
	379	.goods-data{
	380	width: 100%;
	381	box-sizing: border-box;
	382	padding: 37rpx 40rpx 0 40rpx;
	383	background: #FFFFFF;
	384	border-radius: 12rpx;
	385	margin-bottom: 92px;
	386	.opCollapse{
	387	width: 100%;
	388	padding-bottom: 28rpx;
	389	margin-top: 7px;
	390	border-bottom: 1px solid #E9E9E9;
	391	.head{
	392	display: flex;
	393	justify-content: space-between;
	394	height: 24px;
	395	// font-family: PingFangSC-Medium;
	396	font-size: 16px;
	397	color: #333333;
	398	letter-spacing: -0.3px;
	399	text-align: justify;
	400	line-height: 24px;
	401	margin-bottom: 18rpx;
	402	.headRighted{
	403	width: 0;
	404	height: 0;
	405	border-left: 4px solid transparent;
	406	border-right: 4px solid transparent;
	407	border-bottom: 4px solid #CFCFCF;
	408	transform: scaleY(-1);
	409	margin-top: 10px;
	410	}
	411	.headMid{
	412	// font-family: PingFangSC-Regular;
	413	font-size: 10px;
	414	color: #999999;
	415	letter-spacing: -0.19px;
	416	margin-left: -120rpx;
	417	}
	418	.headRight{
	419	width: 0;
	420	height: 0;
	421	border-left: 4px solid transparent;
	422	border-right: 4px solid transparent;
	423	border-bottom: 4px solid #CFCFCF;
	424	margin-top: 10px;
	425	}
	426	}
	427	.body{
	428	// font-family: PingFangSC-Regular;
	429	font-size: 12px;
	430	color: #666666;
	431	letter-spacing: 0;
	432	.bodyBox{
	433	margin-top: 15px;
	434	.names{
	435	// font-family: PingFangSC-Regular;
	436	font-size: 12px;
	437	color: #151515;
	438	letter-spacing: 0;
	439	text-align: justify;
	440	line-height: 17px;
	441	margin-left: 5px;
	442	margin-right: 10px;
	443	}
	444	text{
	445	// font-family: PingFangSC-Regular;
	446	font-size: 12px;
	447	color: #666666;
	448	letter-spacing: 0;
	449	text-align: justify;
	450	}
	451	}
	452
	453	}
	454	}
	455
	456	}
	457
	458	.goods-form {
	459	display: flex;
	460	flex-direction: column;
	461	align-items: center;
	462	justify-content: center;
	463	background-color: #fff;
	464	width: 100%;
	465
	466	.p1 {
	467	font-size: 16px;
	468	color: #333333;
	469	letter-spacing: -0.3px;
	470	text-align: justify;
	471	line-height: 24px;
	472	margin: 4px 0;
	473
	474	}
	475	.p2 {
	476	font-size: 12px;
	477	color: #999999;
	478	letter-spacing: -0.23px;
	479	margin-bottom: 18rpx;
	480	}
	481	image{
	482	width: 28rpx;
	483	height: 26rpx;
	484	}
	485	.confirm {
	486	display: flex;
	487	align-items: center;
	488	font-size: 12px;
	489	color: #666666;
	490	letter-spacing: -0.23px;
	491	width: 684rpx;
	492	image{
	493	margin-right:25rpx;
	494	}
	495	}
	496	.picker{
	497	display: flex;
	498	flex-direction: column;
	499	justify-content: center;
	500	align-items: center;
	501	width: 100%;
	502	image{
	503	width: 10px;
	504	height: 10px;
	505	margin-right: 5px;
	506	}
	507	.picker-choice{
	508	display: flex;
	509	width: 684rpx;
	510	align-items: center;
	511	margin-bottom: 40rpx;
	512	.choice-left{
	513	width: 210rpx;
	514	.p11 {
	515	font-size: 14px;
	516	color: #333333;
	517	letter-spacing: -0.26px;
	518	text-align: justify;
	519	line-height: 24px;
	520	// margin-right: 10px;
	521	}
	522	.p12 {
	523	font-size: 10px;
	524	color: #3F3F3F;
	525	letter-spacing: -0.19px;
	526	text-align: justify;
	527	line-height: 24px;
	528	}
	529
	530
	531	}
	532	.p13 {
	533	font-size: 10px;
	534	color: #999999;
	535	letter-spacing: -0.19px;
	536	margin-right: 10px;
	537	}
	538	.p13-date {
	539	font-size: 10px;
	540	color: #999999;
	541	letter-spacing: -0.19px;
	542	margin-right: 5px;
	543	}
	544	.p14 {
	545	font-size: 14px;
	546	color: #666666;
	547	letter-spacing: -0.26px;
	548	text-align: center;
	549	width: 124rpx;
	550	border-bottom: 1px solid #CFCFCF;
	551	}
	552
	553	}
	554	}
	555	}
	556
	557	.submit{
	558	width: 100%;
	559	height: 112rpx;
	560	background: #FF6B4A;
	561	position: fixed;
	562	bottom: 0;
	563	text-align: center;
	564	line-height: 112rpx;
	565	// font-family: PingFangSC-Regular;
	566	font-size: 16px;
	567	color: #FFFFFF;
	568	letter-spacing: -0.3px;
	569	}
	570
	571	</style>
	572

src/pages/frameDetail/frameDetail.vue

Diff comments View file @f1da24f

 <template>
     <view class="container">
         <view class="D1">
             <!-- 轮播图 -->
             <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
                 <swiper-item v-for="(item) in infos" :key="item.goods_id">
                     <image :src="item.img" mode="scaleToFill"></image>
                 </swiper-item>
             </swiper>
             <view class="D1_price">￥{{price}}</view>
             <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
             <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
         </view>
-        <view class="D2" v-if="goodType === 0 || goodType === 3">
+        <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
             <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
             <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
             <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
         </view>
-        <view class="D2" v-if="goodType === 1">
+        <view class="D2" v-if="updateGoodType == 1">
             <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
             <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
             <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
         </view>
-        <view class="D2" v-if="goodType === 2">
+        <view class="D2" v-if="updateGoodType == 3">
             <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
             <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
             <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
         </view>
         <view class="D3">
 			<view class="screenBar">
 				<view  v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)"  >
 						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
 				</view>
 			</view>
 			<view class="screen-item " v-if="current ===0">
 				<view class="D3_list">
 					<view v-for="(item) in parameter" :key="item.key">
 						<image class="D3_image"  v-bind:src = "item.img"></image>
 						<span>{{item.standard}}</span>
 						<span>{{item.slength}}</span>
 					</view>
 				</view>
 			</view >
 			<view class="screen-item " v-if="current ===1">
 				<view class="D3_list">
 					<view>主体</view>
 					<view>商品产地：韩国</view>
 					<view>包装清单：彩色隐形 * 1</view>
 				</view>
 			</view >
 			<view class="screen-item " v-if="current ===2">
 				<view class="customerService">
 					<view class="serviceItem" >
 						<view class="title">
 							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
 							<text class="titleText">卖家服务</text>
 						</view>
 						<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
 					</view>
 					<view class="serviceItem" >
 						<view class="title">
 							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
 							<text class="titleText">平台承诺</text>
 						</view>
 						<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
 					</view>
 					<view class="serviceItem">
 						<view class="title">
 							<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
 							<text class="titleText">正品保证</text>
 						</view>
 						<view class="itemContent">向您保证所售商品均为正品行货</view>
 					</view>
 					<view class="serviceItem2">
 						<view class="title">
 							<text class="titleText">权利申明</text>
 						</view>
 						<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
 					</view>
 					<view class="serviceItem2">
 						<view class="title">
 							<text class="titleText">价格保证</text>
 						</view>
 						<view class="itemContent">
 							<view class="itemContent-child">
 								<text class="contentTitle">平台价:</text>
 								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
 							</view>
 							<view class="itemContent-child">
 								<text class="contentTitle">划线价:</text>
 								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
 							</view>
 							<view class="itemContent-child">
 								<text class="contentTitle">平折扣:</text>
 								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
 							</view>
 							<view class="itemContent-child">
 								<text class="contentTitle">异常问题:</text>
 								<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view >
         </view>
         <view class="D4" v-if="current !==2">
             <view class="D4_esvalue">
                 <view>{{esvalue}}</view>
                 <view class="D4_2">
 					<view class="star" v-for="o in starCount" :key="o">
 						<image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
 					</view>
 				</view>
             </view>
             <view class="D4_list">
                 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
             </view>
         </view>
         <view class="D5" v-if="current !==2">
             <view class="D5_fixed1">
                 <image src="/static/img/detail/hr.png"></image>
                 <view>商品详细</view>
                 <image src="/static/img/detail/hr.png"></image>
             </view>
             <view class="D5_all">
                 <image v-bind:src="imgAll"></image>
             </view>
             <view class="D5_photoes">
                 <view class="D5_photoes1">
                     <view v-for="(photoes) in photoes" :key="photoes.value">
                         <image  v-bind:src = "photoes.img"></image>
                         <view>{{photoes.value}}</view>
                     </view>
                 </view>
                 <view class="D5_logo1">帕森防蓝光镜片</view>
                 <view class="D5_logo2">健康护眼，我们是认真的！</view>
                 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
             </view>
         </view>
         <view class="D6" v-if="current !==2">
             <view class="D6_v1">CHARM DETAIL</view>
             <view class="D6_v2">细节展示</view>
             <view ><image v-bind:src="imgDetail"></image></view>
             <view>........................................................................</view>
             <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span  class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
         </view>
         <!-- 底部菜单 -->
         <view class="botton">
             <view class="botton_1"><image  v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
             <view class="botton_2">
                 <view class="botton_input">加入购物车</view>
                 <view class="botton_now" @click="goPerchase">立即购买</view>
             </view>
         </view>
     </view>
 </template>
 <script>
 export default {
     data(){
         return {
             name:'商品名称',
-			goodType:1,
+			goodType:2,
             price: 120,
             number: 391,
 			screenItems: [
 				{current:0,text:'商品保障'},
 				{current:1,text:'规格参数'},
 				{current:2,text:'售后保障'},
 				],
 			current: 0,
 			starCount:5,
             infos: [
                 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
             	{ goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
             	{ goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
             	{ goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
             ],
             parameter:[
                 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
                 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
                 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
                 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
                 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
                 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
             ],
             assess:[
                 {key: 0, Iassess: '价格实惠'},
                 {key: 1, Iassess: '美观大方'},
                 {key: 2, Iassess: '易搭配'}
             ],
             esvalue:'宝贝好评率 100%',
             introduction:{
                 material:'钛合金',
                 func:'抗疲劳/防辐射',
                 rate: 1.6
             },
             imgAll:'/static/img/detail/d8.png' ,
             photoes:[
                 {value:'日常办公', img:'/static/img/detail/d9.png'},
                 {value:'上网', img:'/static/img/detail/d10.png'},
                 {value:'追剧', img:'/static/img/detail/d11.png'},
                 {value:'玩游戏', img:'/static/img/detail/d12.png'},
             ],
             imgDetail:'/static/img/detail/d13.png',
             imgShop:{
                 img:'/static/tab-cart.png',
                 IsShown: false
             }
         }
     },
+	onLoad:function(option){
+		this.goodType = option.goodType
+		console.log(this.updateGoodType)
+	},
+	computed:{
+		updateGoodType(){
+			return this.goodType
+		}
+	},
 	methods:{
 		goPerchase(){
-			uni.navigateTo({
+			switch(this.updateGoodType){
-				url: '../purchaseLenses/purchaseLenses',
+				case '1':
-				success: res => {},
+					uni.navigateTo({
-				fail: () => {},
+						url: '../detailsChoiceArgs/detailsChoiceArgs',
-				complete: () => {}
+						success: res => {},
-			});
+						fail: () => {},
+						complete: () => {}
+					});
+				break;
+				case '2':
+					uni.navigateTo({
+						url: `../detailStandard/detailStandard_k`,
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				break;
+				case '3':
+					uni.navigateTo({
+						url: `../purchaseLenses/purchaseLenses`,
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				break;
+				case '4':
+					uni.navigateTo({
+						url: `../detailStandard/detailStandard_sun`,
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+				break;
+				default :
+					break
+			}
 		},
 		tabChange(e) {
 			if (this.current !== e) {
 				this.current = e;
 			}
 		}
 	}
 }
 </script>
 <style lang='scss'>
     .container{
         background-color:#f8f8f8 ;
     }
     .D1,.D2,.D3,.D4,.D6{
         background: #ffffff;
         margin-bottom: 10px;
         padding:8px 20px 8px 20px;
         box-sizing: border-box;
 			.swiperImage {
 			    width: 684rpx;
 			    height: 512rpx;
 			    image {
 			        width: 100%;
 			        height: 100%;
 			        border-radius: 16rpx;
 			    }
 			}
     }
     .D5{
         background: #ffffff;
         padding:8px 20px 8px 20px;
         box-sizing: border-box;
     }
     .swiperImage{
         width: 100%;
         height: 560rpx;
         .swiper-item{
             width: 100%;
             image{
                 width: 100%;
             }
         }
     }
     .D1{
         .D1_price{
             color: #EB5D3B;
             font-size: 18px;
             margin-top: 5px;
             font-family: 'PingFangSC-Semibold';
         }
         .D1_name{
             font-size: 16px;
             font-family: 'PingFangSC-Semibold';
             margin-top: 5px;
             display: flex;
             justify-content: space-between;
             .D1_name1{
                 font-weight: bold;
 				font-size: 16px;
 				color: #333333;
             }
             .D1_number{
                 color: #999999 ;
                 font-size: 14px;
                 font-family: 'PingFangSC-Regular';
             }
         }
         .D1_spans{
             font-size: 10px;
             color:#999999;
             margin-top: 5px;
             span{
                 height: 14px;
                 margin-right: 10px;
             }
         }
     }
     .D2{
         font-size: 14px;
         font-family: 'PingFangSC-Regular';
         view{
             height: 24px;
         }
         .D2_span1{
             color: #999999;
         }
         .D2_span2{
             color: #333333;
         }
     }
     .D3{
 		.screenBar{
 			width: 670rpx;
 			margin-top: 20rpx;
 			margin-bottom: 24rpx;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			font-size: 14px;
 			color: #333333;
 			transition:all 0.2s;
 		}
 		.screen-item{
 			font-size: 32rpx;
 			color: #333333;
 			display: flex;
 			transition:all 0.2s;
 			.D3_list{
 			    margin-bottom: 4px;
 			}
 			.D3_list view{
 			    display: flex;
 			    align-content: center;
 				font-size: 14px;
 				color: #333333;
 			}
 			.D3_list image{
 			    width: 50px;
 			    height: 25px;
 			    margin-right: 6px;
 			}
 			.D3_list span{
 			    margin-left: 6px;
 			    margin-right: 5px;
 			    font-family: 'PingFangSC-Regular';
 			}
 		}
 		.active{
 			border-bottom: 4rpx solid #FF6B4A;
 		}
 		.customerService{
 			margin-bottom: 90rpx;
 			.serviceItem{
 				margin-bottom: 32rpx;
 				.title{
 					display: flex;flex-direction: row;
 					align-items: center;
 					.titleText{
 						font-size: 14px;
 						color: #333333;
 						margin-bottom: 12rpx;
 					}
 				}
 				.itemContent{
 					font-size: 14px;
 					color: #999999;
 					margin-left: 18rpx;
 				}
 			}
 			.serviceItem2{
 				margin-left: 18rpx;
 				margin-bottom: 32rpx;
 				.titleText{
 					font-size: 14px;
 					color: #FF6B4A;
 				}
 				.itemContent{
 					font-size: 14px;
 					color: #999999;
 					.itemContent-child{
 						margin-bottom: 40rpx;
 						.contentTitle{
 							border-bottom: 1px solid #FF6B4A;
 						}
 					}
 				}
 			}
 		}
     }
     .D4{
         .D4_esvalue{
 			font-size: 14px;
 			color: #333333;
             display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
             .D4_2{
                 width: 90px;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
             }
         }
         .D4_esvalue view{
             font-size: 14px;
             color: #333333;
             font-weight: bold;
         }
         .D4_list view{
             display: inline-block;
             font-size: 12px;
             text-align: center;
             margin-right: 12px;
             width: 90px;
             height: 24px;
             line-height: 24px;
             background: #F2F2F2;
             color: #666666 ;
         }
     }
     .D5{
         .D5_fixed1{
             display: flex;
             justify-content: space-between;
             align-content: center;
             margin-bottom: 12px;
             view{
                 font-size: 14px;
                 color: #333333;
                 font-weight: bold;
                 font-family: 'PingFangSC-Medium';
                 line-height: 24px;
             }
             image{
                 width: 240rpx;
                 height: 3px;
                 margin-top: 10px;
             }
         }
         .D5_all {
             width: 100%;
             height: 380px;
             margin-bottom: 30px;
             font-family: 'PingFangSC-Regular';
             border: #999999 solid 1.5px;
            image{
                 width: 100%;
                 height: 380px;
         }}
         .D5_photoes1{
             display: grid;
             grid-template-columns: 48% 48%;
             grid-row-gap: 10px;
             grid-column-gap: 4%;
             image{
                 width: 100%;
                 height: 70px;
             }
             view{
                 width: 100%;
                 font-size: 14px;
                 text-align: center;
                 background: #949494;
                 font-family: 'PingFangSC-Regular';
                 color: #ffffff;
                 view{
                     height: 24px;
                     line-height: 24px;
                 }
             }
         }
         .D5_logo1,.D5_logo2{
             text-align: center;
         }
         .D5_logo1{
             margin-top: 40px;
             font-size: 24px;
             font-weight: bold;
             font-family: 'PingFangSC-Semibold';
         }
         .D5_logo2{
             font-size: 12px;
         }
         .D5_logo3{
             width: 100%;
             text-align: center;
             image{
                 width: 50px;
                 height: 24px;
             }
         }
     }
     .D6{
         width: 100%;
         height: 430px;
         background: #F9F6ED;
         margin-bottom: 74px;
         view{
             text-align: center;
         }
         .D6_v1{
             font-weight: bold;
         }
         .D6_v2{
             font-size: 14px;
             margin-bottom: 30px;
         }
         .D6_v5{
             .D6_v5_s1{
                 font-weight: bold;
             }
             .D6_v5_s2{
                 font-size: 14px;
             }
         }
     }
     .botton{
         position: fixed;
         bottom: 0;
         height: 74px;
         width: 100%;
         background: #FFFFFF;
         padding: 20px 20px 8px 20px;
         font-family: 'PingFangSC-Regular';
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-content: center;
         .botton_1{
             width: 20%;
             height: 100%;
             text-align: center;
             color: #989898;
         }
         image{
             width: 60%;
             height: 30px;
         }
         .botton_image{
             font-size: 12px;
             text-align: center;
         }
         .botton_2{
             width: 74%;
             height: 86%;
             display: grid;
             grid-template-columns: 50% 50%;
         }
         .botton_input{
             display: inline-flex;
             align-items: center;
             justify-content: space-around;
             background: #FFF0EC;
             font-size: 16px;
             color: #FF6B4A;
             border-radius: 20px 0 0 20px;
         }
         .botton_now{
             display: inline-flex;
             align-items: center;
             justify-content: space-around;
             background: #FF6B4A;
             font-size: 16px;
             color: #FFFFFF;
             border-radius:0  20px 20px 0;
         }
     }
 </style>

src/pages/index/index.vue

Diff comments View file @f1da24f

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="老花镜" confirm-type="search" />	7	<input class="searchIpt" placeholder="老花镜" confirm-type="search" />
8	</view>	8	</view>
9		9
10	<!-- 筛选栏-->	10	<!-- 筛选栏-->
11	<view class="screenBar">	11	<view class="screenBar">
12	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">	12	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13	<view	13	<view
14	class="screenItem"	14	class="screenItem"
15	v-bind:class="{ active: current === item.current }"	15	v-bind:class="{ active: current === item.current }"
16	v-if="item.current === 2"	16	v-if="item.current === 2"
17	@click="dropDown"	17	@click="dropDown"
18	>	18	>
19	{{ item.text }}	19	{{ item.text }}
20	<icon type="info" size="14"></icon>	20	<icon type="info" size="14"></icon>
21	</view>	21	</view>
22	<view	22	<view
23	class="screenItem"	23	class="screenItem"
24	v-bind:class="{ active: current === item.current }"	24	v-bind:class="{ active: current === item.current }"
25	v-if="item.current === 4"	25	v-if="item.current === 4"
26	@click="showDrawer('showRight')"	26	@click="showDrawer('showRight')"
27	>	27	>
28	{{ item.text }}	28	{{ item.text }}
29	<icon type="info" size="14"></icon>	29	<icon type="info" size="14"></icon>
30	</view>	30	</view>
31	<view v-if="item.current !== 2&&item.current!==4">	31	<view v-if="item.current !== 2&&item.current!==4">
32	<view	32	<view
33	class="screenItem"	33	class="screenItem"
34	v-bind:class="{ active: current === item.current }"	34	v-bind:class="{ active: current === item.current }"
35	>{{ item.text }}</view>	35	>{{ item.text }}</view>
36	</view>	36	</view>
37	</view>	37	</view>
38	</view>	38	</view>
39	</view>	39	</view>
40	<Uni-drawer	40	<Uni-drawer
41	ref="showRight"	41	ref="showRight"
42	mask="true"	42	mask="true"
43	maskClick="true"	43	maskClick="true"
44	mode="right"	44	mode="right"
45	:width="320"	45	:width="320"
46	@change="change($event,'showRight')"	46	@change="change($event,'showRight')"
47	>	47	>
48	<view class="close">	48	<view class="close">
49	<view @click="closeDrawer('showRight')">	49	<view @click="closeDrawer('showRight')">
50	<text class="word-btn-white">关闭</text>	50	<text class="word-btn-white">关闭</text>
51	</view>	51	</view>
52	</view>	52	</view>
53	</Uni-drawer>	53	</Uni-drawer>
54		54
55	<!-- 筛选菜单-->	55	<!-- 筛选菜单-->
56	<view class="content-wrap">	56	<view class="content-wrap">
57	<view>	57	<view>
58	<HMfilterDropdown	58	<HMfilterDropdown
59	:filterData="filterData"	59	:filterData="filterData"
60	:defaultSelected="filterDropdownValue"	60	:defaultSelected="filterDropdownValue"
61	:updateMenuName="true"	61	:updateMenuName="true"
62	@confirm="confirm"	62	@confirm="confirm"
63	data-format="Object"	63	data-format="Object"
64	></HMfilterDropdown>	64	></HMfilterDropdown>
65	<!-- 商品列表 -->	65	<!-- 商品列表 -->
66	<view class="goods-list">	66	<view class="goods-list">
67	<view class="product-list">	67	<view class="product-list">
68	<view class="product" v-for="(goods) in goodsList" :key="goods.id">	68	<view class="product" v-for="(goods) in goodsList" :key="goods.id">
69	<Card :goods="goods"></Card>	69	<Card :goods="goods"></Card>
70	</view>	70	</view>
71	</view>	71	</view>
72	<view class="loading-text">{{loadingText}}</view>	72	<view class="loading-text">{{loadingText}}</view>
73	</view>	73	</view>
74	</view>	74	</view>
75	</view>	75	</view>
76	</view>	76	</view>
77	</template>	77	</template>
78		78
79	<script>	79	<script>
80	import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";	80	import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81	import Card from "@/components/CommodityCard/CommodityCard.vue";	81	import Card from "@/components/CommodityCard/CommodityCard.vue";
82	import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";	82	import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83	import data from "@/common/data.js"; //筛选菜单数据	83	import data from "@/common/data.js"; //筛选菜单数据
84	import store from '@/store';	84	import store from '@/store';
85		85
86	export default {	86	export default {
87	components: {	87	components: {
88	UniDrawer: UniDrawer,	88	UniDrawer: UniDrawer,
89	HMfilterDropdown: HMfilterDropdown,	89	HMfilterDropdown: HMfilterDropdown,
90	Card: Card	90	Card: Card
91	},	91	},
92	data() {	92	data() {
93	return {	93	return {
94	screenItems: [	94	screenItems: [
95	{ current: 0, text: "全部", hasIcon: false },	95	{ current: 0, text: "全部", hasIcon: false },
96	{ current: 1, text: "销量", hasIcon: false },	96	{ current: 1, text: "销量", hasIcon: false },
97	{ current: 2, text: "价格", hasIcon: true },	97	{ current: 2, text: "价格", hasIcon: true },
98	{ current: 3, text: "折扣", hasIcon: false },	98	{ current: 3, text: "折扣", hasIcon: false },
99	{ current: 4, text: "筛选", hasIcon: true }	99	{ current: 4, text: "筛选", hasIcon: true }
100	],	100	],
101	current: 0,	101	current: 0,
102	showRight: false,	102	showRight: false,
103	indexArr: "",	103	indexArr: "",
104	valueArr: "",	104	valueArr: "",
105	// //商品数据	105	loadingText: "~~到底了~~",
106	// goodsList: [
107	// {
108	// // goods_id: 0,
109	// // img: "/static/img/goods/p1.jpg",
110	// // name: "商品名称",
111	// // originCost: "￥198",
112	// // price: "￥168",
113	// // slogan: "1235人浏览"
114	// }
115	// ],
116	loadingText: "正在加载...",
117	filterDropdownValue: [],	106	filterDropdownValue: [],
118	filterData: []	107	filterData: [],
		108	goodsList:[
		109	{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
		110	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
		111	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
		112	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
		113	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
		114	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
		115	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
		116	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
		117	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
		118	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
		119	],
119	};	120	};
120	},	121	},
121	computed: {	122	computed: {
122	goodsList() {	123	// goodsList() {
123	// 也可以从 getters 获取	124	// // 也可以从 getters 获取
124	console.log(this.$store.getters.list);	125	// console.log('list', this.$store.state.test.list);
125	return this.$store.state.test.list;	126	// return this.$store.state.test.list;
126	}	127	// },
		128	// categoryList(){
		129	// console.log(this.$store.state.categoryOrder.categoryList);
		130	// this.filterData = this.$store.state.categoryOrder.categoryList
		131	// }
		132
127	},	133	},
128	filters: {	134	filters: {
129	outData(value) {	135	outData(value) {
130	return JSON.stringify(value);	136	return JSON.stringify(value);
131	}	137	}
132	},	138	},
133	onLoad: function() {	139	onLoad: function() {
134	store.dispatch('test/fetch');	140	store.dispatch('test/fetch');
135	// uni.request({	141	store.dispatch('categoryOrder/fetch')
136	// url: "https://api.glass.xiuyetang.com/app/prod/list",	142
137	// method: "post",
138	// data: {
139	// // text: 'uni.request'
140	// },
141	// header: {
142	// // 'custom-header': 'hello', //自定义请求头信息
143	// "Content-Type": "application/x-www-form-urlencoded"
144	// // 'Content-Type':'multipart/form-data'
145	// // 'Content-Type':'ext/plain'
146	// },
147	// timeout: 3000,
148	// // dataType:'json'
149	// // responseType:'text',
150	// // sslVerify: true, //验证 ssl 证书
151	// withCredentials: false, //跨域请求时是否携带凭证（cookies）
152	// success: res => {
153	// console.error("success status === > ", res);
154	// this.goodsList = res.data.data;
155	// // console.log('res.data', res.data);
156	// // this.text = 'request success';
157	// },
158	// fail: res => {
159	// console.log("fail status === > ", res);
160	// },
161	// complete: res => {
162	// console.log("complete status === > ", res);
163	// }
164	// });
165	//定时器模拟ajax异步请求数据	143	//定时器模拟ajax异步请求数据
166	// setTimeout(()=>{	144	setTimeout(()=>{
167	// //传入defaultSelected的结构不能错，错了就报错运行异常。不选中的项目传入null	145	//传入defaultSelected的结构不能错，错了就报错运行异常。不选中的项目传入null
168	// this.filterDropdownValue = [	146	// this.filterDropdownValue = [
169	// [1,1,0], //第0个菜单选中一级菜单的第1项，二级菜单的第1项，三级菜单的第3项	147	// [1,1,0], //第0个菜单选中一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
170	// [null,null], //第1个菜单选中都不选中	148	// [null,null], //第1个菜单选中都不选中
171	// [1], //第2个菜单选中一级菜单的第1项	149	// [1], //第2个菜单选中一级菜单的第1项
172	// [[0],[1,2,7],[1,0]], //筛选菜单选中第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项	150	// [[0],[1,2,7],[1,0]], //筛选菜单选中第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
173	// [[0],[1],[1]], //单选菜单选中第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项	151	// [[0],[1],[1]], //单选菜单选中第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
174	// ];	152	// ];
175	// this.filterData = data;	153	// this.filterData = data;
176	// },100);	154	},100);
177	// 模拟ajax请求子菜单数据。
178	// setTimeout(()=>{
179	// console.log('发起请求','ddddddd');
180	// // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
181	// },3000);
182	},	155	},
183	methods: {	156	methods: {
184	showDrawer(e) {	157	showDrawer(e) {
185	this.$refs[e].open();	158	this.$refs[e].open();
186	},	159	},
187	closeDrawer(e) {	160	closeDrawer(e) {
188	this.$refs[e].close();	161	this.$refs[e].close();
189	},	162	},
190	change(e, type) {	163	change(e, type) {
191	this[type] = e;	164	this[type] = e;
192	},	165	},
193	onClickItem(e) {	166	onClickItem(e) {
194	if (this.current !== e) {	167	if (this.current !== e) {
195	this.current = e;	168	this.current = e;
196	}	169	}
197	},	170	},
198	dropDown() {	171	dropDown() {
199	console.log("下拉");	172	console.log("下拉");
200	},	173	},
201	//接收菜单结果	174	//接收菜单结果
202	confirm(e) {	175	confirm(e) {
203	this.indexArr = e.index;	176	this.indexArr = e.index;
204	this.valueArr = e.value;	177	this.valueArr = e.value;
205	return;	178	return;
206	console.log("修改菜单");	179	console.log("修改菜单");
207	this.filterData[4].submenu[1] = {	180	this.filterData[4].submenu[1] = {
208	name: "项目2",	181	name: "项目2",
209	submenu: []	182	submenu: []
210	};	183	};
211	}	184	}
212	},	185	},
213	onNavigationBarButtonTap(e) {	186
214	this.showRight = !this.showRight;
215	},
216	//上拉加载，
217	onReachBottom() {
218	console.log("到底加载");
219	let len = this.goodsList.length;
220	if (len >= 30) {
221	this.loadingText = "~~到底了~~";
222	return false;
223	} else {
224	this.loadingText = "正在加载...";
225	}
226	let end_goods_id = this.goodsList[len - 1].goods_id;
227	for (let i = 1; i <= 10; i++) {
228	let goods_id = end_goods_id + i;
229	let p = {
230	goods_id: goods_id,
231	img:
232	"/static/img/goods/p" +
233	(goods_id % 10 == 0 ? 10 : goods_id % 10) +
234	".jpg",
235	name: "商品名称",
236	originCost: "￥198",
237	price: "￥168",
238	slogan: "1235人付款"
239	};
240	this.goodsList.push(p);
241	}
242	}
243	};	187	};
244	</script>	188	</script>
245		189
246	<style lang="scss">	190	<style lang="scss">
247	.content {	191	.content {
248	display: flex;	192	display: flex;
249	flex-direction: column;	193	flex-direction: column;
250	align-items: center;	194	align-items: center;
251	justify-content: center;	195	justify-content: center;
252	background-color: #f7f6f6;	196	background-color: #f7f6f6;
253	}	197	}
254	.header {	198	.header {
255	display: flex;	199	display: flex;
256	flex-direction: column;	200	flex-direction: column;
257	align-items: center;	201	align-items: center;
258	justify-content: center;	202	justify-content: center;
259	background-color: #f7f6f6;	203	background-color: #f7f6f6;
260	height: 178rpx;	204	height: 178rpx;
261	width: 100%;	205	width: 100%;
262	z-index: 999;	206	z-index: 999;
263	position: fixed;	207	position: fixed;
264	top: 0;	208	top: 0;
265	left: 0;	209	left: 0;
266	}	210	}
267	.searchBar {	211	.searchBar {
268	width: 670rpx;	212	width: 670rpx;
269	display: flex;	213	display: flex;
270	justify-content: center;	214	justify-content: center;
271	align-items: center;	215	align-items: center;
272	box-sizing: border-box;	216	box-sizing: border-box;
273	padding: 0rpx 16rpx;	217	padding: 0rpx 16rpx;
274	border: 1px solid #ff6b4a;	218	border: 1px solid #ff6b4a;
275	border-radius: 8rpx;	219	border-radius: 8rpx;
276	background-color: #ffffff;	220	background-color: #ffffff;
277	}	221	}
278		222
279	.searchIpt {	223	.searchIpt {
280	height: 68rpx;	224	height: 68rpx;
281	width: 670rpx;	225	width: 670rpx;
282	padding: 16rpx;	226	padding: 16rpx;
283	font-size: 28rpx;	227	font-size: 28rpx;
284	box-sizing: border-box;	228	box-sizing: border-box;
285	}	229	}
286	.screenBar {	230	.screenBar {
287	width: 670rpx;	231	width: 670rpx;
288	height: 110rpx;	232	height: 110rpx;
289	display: flex;	233	display: flex;
290	flex-direction: row;	234	flex-direction: row;
291	justify-content: space-between;	235	justify-content: space-between;
292	align-items: center;	236	align-items: center;
293	color: #333333;	237	color: #333333;
294	font-size: 32rpx;	238	font-size: 32rpx;
295	}	239	}
296	.active {	240	.active {
297	color: #ff6b4a;	241	color: #ff6b4a;
298	}	242	}
299	.screenItem {	243	.screenItem {
300	display: flex;	244	display: flex;
301	justify-content: center;	245	justify-content: center;
302	align-items: center;	246	align-items: center;
303	}	247	}
304	.content-wrap {	248	.content-wrap {
305	width: 100%;	249	width: 100%;
306	background-color: #ffffff;	250	background-color: #ffffff;
307	}	251	}
308		252
309	.HMfilterDropdown {	253	.HMfilterDropdown {
310	top: 178rpx !important;	254	top: 178rpx !important;
311	}	255	}
312		256
313	.goods-list {	257	.goods-list {
314	padding-top: 286rpx;	258	padding-top: 286rpx;
315	.loading-text {	259	.loading-text {
316	width: 100%;	260	width: 100%;
317	display: flex;	261	display: flex;
318	justify-content: center;	262	justify-content: center;
319	align-items: center;	263	align-items: center;
320	height: 30px;	264	height: 30px;
321	color: #979797;	265	color: #979797;
322	font-size: 12px;	266	font-size: 12px;

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @f1da24f

 <template>
 	<view>
 		<view class="card" v-if="current === order.orderType" >
 			<view class="cardHeader">
 				<text class="orderId">订单号：{{order.orderId}}</text>
 				<text class="orderType" v-if="order.orderType===1">待付款</text>
 				<text class="orderType" v-if="order.orderType===2">待发货</text>
 				<text class="orderType" v-if="order.orderType === 3">待收货</text>
 				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
 				<text class="orderType" v-if="order.orderType === 5">已完成</text>
 			</view>
 			<view class="orderCardInfo">
 				<image :src="order.img" mode="aspectFill"></image>
 				<view class="infoText">
 					<view class="orderName">{{order.name}}</view>
 					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
 					<view class="infoText-bottom">
 						<view class="markPrice">{{order.price}}</view>
 						<view class="buy-num">X{{order.buyNum}}</view>
 					</view>
 				</view>
 			</view>
 			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
 			<view class="btns" v-if="order.orderType === 1">
 				<view class="btn-type1">申请退款</view>
 				<view class="btn-type2">去支付</view>
 			</view>
 			<view class="btns" v-if="order.orderType === 0">
 				<view class="btn-type1">再次购买</view>
 			</view>
 		</view>
 		<view class="card" v-if="current === 0" >
 			<view class="cardHeader">
 				<text class="orderId">订单号：{{order.orderId}}</text>
 				<text class="orderType" v-if="order.orderType===1">待付款</text>
 				<text class="orderType" v-if="order.orderType===2">待发货</text>
 				<text class="orderType" v-if="order.orderType === 3">待收货</text>
 				<text class="orderType" v-if="order.orderType === 4">退款售后</text>
 			</view>
 			<view class="orderCardInfo">
 				<image :src="order.img" mode="aspectFill"></image>
 				<view class="infoText">
 					<view class="orderName">{{order.name}}</view>
 					<view class="orderDescrib">规格：玫瑰金 / 钛合金 / 防日光防紫外线</view>
 					<view class="infoText-bottom">
 						<view class="markPrice">{{order.price}}</view>
 						<view class="buy-num">X{{order.buyNum}}</view>
 					</view>
 				</view>
 			</view>
 			<view class="payPrice">实付：<text class="priceNum">{{order.price}}</text> </view>
 			<view class="btns" v-if="order.orderType === 1">
 				<view class="btn-type1" @click="toRefundment">申请退款</view>
 				<view class="btn-type2">去支付</view>
 			</view>
 			<view class="btns" v-if="order.orderType === 0">
 				<view class="btn-type1">再次购买</view>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
 	export default {
 		props: {
 			/**
 			 * 订单数据
 			 */
 			order: {
 				orderId: Number,
 				img: String,
 				name: String,
 				originCost:String,
 				price: String,
 				orderType:Number,
 				buyNum:Number
 			},
 			/**
 			 * 当前选择
 			 */
 			current:Number
 		},
-		data() {
+		onLoad() {
-			return {
+			// console.log('dd');
-			};
+			console.log('order', this.props.order);
+		},
+		data() {
+			return {
+			};
 		},
 		methods:{
 			toRefundment(){
 				uni.navigateTo({
 					url: '../refundment/refundment',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.card{
 		width: 670rpx;
 		height: 478rpx;
 		background: #FFFFFF;
 		box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
 		border-radius: 8px;
 		border-radius: 8px;
 		margin-top: 20rpx;
 		padding: 40rpx;
 		box-sizing: border-box;
 		.cardHeader{
 			width: 100%;
 			height: 40rpx;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			.orderId{
 				font-size: 12px;
 				color: #999999;
 			}
 			.orderType{
 				font-size: 14px;
 				color: #FF6B4A;
 			}
 		}
 		.orderCardInfo{
 			width: 100%;
 			height: 188rpx;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			margin-top: 40rpx;
 			image{
 				height: 188rpx;
 				width: 188rpx;
 				margin-right: 24rpx;
 			}
 			.infoText{
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				align-items: flex-start;
 				height: 188rpx;
 			}
 			.orderName{
 				font-size: 14px;
 				color: #333333;
 			}
 			.orderDescrib{
 				font-size: 12px;
 				color: #999999;
 			}
 			.infoText-bottom{
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				align-items: center;
 				width: 100%;
 				.markPrice{
 					font-size: 14px;
 					color: #FF6B4A;
 				}
 				.buy-num{
 					font-size: 12px;
 					color: #999999;
 				}
 			}
 		}
 		.payPrice{
 			text-align: right;
 			margin: 20rpx 0;
 			font-size: 14px;
 			color: #333333;
 			.priceNum{
 				font-size: 14px;
 				color: #FF6B4A;
 			}
 		}
 		.btns{
 			display: flex;
 			justify-content: flex-end;
 			align-items: center;
 			.btn-type1{
 				height: 48rpx;
 				width: 156rpx;
 				border: 1px solid #FF6B4A;
 				border-radius: 12px;
 				border-radius: 12px;
 				text-align: center;
 				line-height: 48rpx;
 				font-size: 12px;
 				color: #FF6B4A;
 			}
 			.btn-type2{
 				height: 48rpx;
 				width: 140rpx;
 				background: #FF6B4A;
 				border-radius: 12px;
 				border-radius: 12px;
 				text-align: center;
 				line-height: 48rpx;
 				font-size: 12px;
 				color: #FFFFFF;
 				margin-left: 20rpx;
 			}
 		}
 	}
 </style>

src/pages/myOrder/myOrder.vue

Diff comments View file @f1da24f

 <template>
 	<view class="content">
 		<view class="header">
 			<!-- 搜索-->
 			<view class="searchBar">
 				<icon class="searchIcon" type="search" size="14"></icon>
 				<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
 			</view>
 			<view class="screenBar">
 				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
 						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
 				</view>
 			</view>
 		</view>
 		<view class="orderList" >
-			<view  v-for="(order) in orderList" :key="order.orderId">
+			<view
+			  v-for="(order) in orderList"
+			  :key="order.orderId"
+			>
 				<OrderCard :order = "order" :current="current"></OrderCard>
 			</view>
 		</view>
 		<view class="footer">已显示全部</view>
 	</view>
 </template>
 <script>
-	import OrderCard from './components/OrderCard.vue'
+	import OrderCard from './components/OrderCard.vue';
+	import store from '@/store';
 	export default {
 		components:{
-			'OrderCard':OrderCard
+			'OrderCard': OrderCard
 		},
 		data() {
 			return {
 				screenItems: [
 					{current:0,text:'全部'},
 					{current:1,text:'待付款'},
 					{current:2,text:'待发货'},
 					{current:3,text:'待收货'},
 					{current:4,text:'退款售后'},
 					],
 				current: 0,
 				//订单数据
-				orderList:[
+				// orderList:[
-					{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
+				// 	{ orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
-					{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
+				// 	{ orderId: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
-					{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
+				// 	{ orderId: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:2 ,buyNum:1},
-					{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
+				// 	{ orderId: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
-					{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
+				// 	{ orderId: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:3 ,buyNum:1},
-					{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
+				// 	{ orderId: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
-					{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
+				// 	{ orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
-					{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
+				// 	{ orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
-					{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
+				// 	{ orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
-				],
+				// ],
 			};
 		},
+		onLoad: function() {
+			store.dispatch('myOrder/getList', {
+				uid: "1",
+				way: "0",
+			});
+		},
+		computed: {
+			orderList() {
+				console.log('orderList', this.$store.state.myOrder.orderlist);
+				return this.$store.state.myOrder.orderlist;
+			}
+		},
 		methods:{
 			onClickItem(e) {
 				if (this.current !== e) {
 					this.current = e;
 				}
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		background-color: #F7F6F6;
 		min-height: 100vh;
 		.header{
 			background-color: #ffffff;
 			width: 100%;
 			height: 232rpx;
 			padding: 40rpx 40rpx 36rpx 40rpx;
 			box-sizing: border-box;
 			position: fixed;
 			top: 0;
 			left: 0;
 			.searchBar {
 				width: 670rpx;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				box-sizing: border-box;
 				padding: 0rpx 16rpx;
 				border: 1px solid #FF6B4A;
 				border-radius: 8rpx;
 				background-color: #ffffff;
 			}
 			.screenBar{
 				width: 670rpx;
 				height: 110rpx;
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				align-items: center;
 				color: #333333;
 				font-size: 32rpx;
 			}
 			.screenItem{
 				height: 50rpx;
 				font-size: 32rpx;
 				color: #333333;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				transition:all 0.2s;
 			}
 			.active{
 				// font-size: 34rpx;
 				color: #EC5D3B;
 			}
 			.searchIpt {
 				height: 68rpx;
 				width: 670rpx;
 				padding: 16rpx;
 				font-size: 28rpx;
 				box-sizing: border-box;
 			}
 		}
 		.orderList{
 			margin-top: 232rpx;
 		}
 		.footer{
 			font-size: 14px;
 			color: #B8B8B8;
 			margin: 40rpx 0;
 		}
 	}
 </style>

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @f1da24f

1	<template>	1	<template>
2	<view class="content">	2
3	<view class="header">	3	<view class="content">
4	<view class="header-name">	4	<view class="order-hr"></view>
5	<navigator open-type="navigateBack" hover-class="navigator-hover">	5	<view class="order-time">
6	<image src="/static/back.png"></image>	6	<text>请在</text>
7	</navigator>	7	<!-- <text class="p2"></text> -->
8	<text>我的订单</text>	8	<uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false"
9	</view>	9	:hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown>
		10	<text>内完成付款</text>
10	</view>	11	</view>
11	<scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">	12	<view class="order">
12	<view class="order-hr"></view>
13	<view class="order-time">
14	<text>请在</text>
15	<text class="p2">00:59:58 </text>
16	<text>内完成付款</text>
17	</view>
18	<view class="order-user">	13	<view class="order-user">
19	<view class="order-user-head">	14	<view class="order-user-head">
20	<text class="p1">钱大大</text>	15	<text class="p1">钱大大</text>
21	<text class="p2">18823749843</text>	16	<text class="p2">18823749843</text>
22	</view>	17	</view>
23	<view class="order-user-body">	18	<view class="order-user-body">
24	<image src="../../static/myorder-paying-location.png"></image>	19	<image src="../../static/myorder-paying-location.png"></image>
25	<text class="p3">四川省德阳市旌阳区</br>黄河西路碧桂园3期 4单元 202</text>	20	<text class="p3">四川省德阳市旌阳区</br>黄河西路碧桂园3期 4单元 202</text>
26	</view>	21	</view>
27	</view>	22	</view>
28	<view class="order-info">	23	<view class="order-info">
29	<view class="order-info-head">	24	<view class="order-info-head">
30	<image src="../../static/myorder-paying-pic.png"></image>	25	<image src="../../static/myorder-paying-pic.png"></image>
31	<view class="order-info-head-r">	26	<view class="order-info-head-r">
32	<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>	27	<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
33	<text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>	28	<view class="p2" style="margin: 0;">
34	<text class="p3">￥180</text>	29	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
		30	<!-- <view class="arrow"></view> -->
		31	</view>
		32	<text class="p3"><span>￥180</span><span class="p4">X1</span></text>
35	</view>	33	</view>
36	</view>	34	</view>
37	<view class="order-info-goodsnum">	35	<!-- <view class="order-info-goodsnum">
38	<text>X1</text>	36	<text>X1</text>
39	</view>	37	</view> -->
40	<text class="order-info-freight">	38	<text class="order-info-freight">
41	<text class="p1">运费</text>	39	<text class="p1">运费</text>
42	<text class="p2">0.00</text>	40	<text class="p2">0.00</text>
43	</text>	41	</text>
44	<text class="order-info-discount">	42	<text class="order-info-discount">
45	<text class="p1">优惠</text>	43	<text class="p1">优惠</text>
46	<text class="p2">-￥70.00</text>	44	<text class="p2">-￥70.00</text>
47	</text>	45	</text>
48	<text class="order-info-price">	46	<text class="order-info-price">
49	<text class="p1">实付</text>	47	<text class="p1">实付</text>
50	<text class="p2">￥110</text>	48	<text class="p2">￥110</text>
51	</text>	49	</text>
52	<text class="order-info-num">	50	<text class="order-info-num">
53	<text>订单号：203486795859605849</text>	51	<text>订单号：203486795859605849</text>
54	</text>	52	</text>
55	<text class="order-info-time">	53	<text class="order-info-time">
56	<text>下单时间：2020-10-22 14:32:42</text>	54	<text>下单时间：2020-10-22 14:32:42</text>
57	</text>	55	</text>
58	<view class="order-info-hr"></view>	56	<view class="order-info-hr"></view>
59	<view class="order-info-contact">	57	<view class="order-info-contact">
60	<image src="../../static/myorder-paying-contact.png"></image>	58	<image src="../../static/myorder-paying-contact.png"></image>
61	<text>联系客服</text>	59	<text>联系客服</text>
62	</view>	60	</view>
63	</view>	61	</view>
64	</scroll-view>	62	</view>
65	<view class="order-confim">	63	<view class="order-confim">
66	<button class="b1">取消订单</button>	64	<button class="b1">取消订单</button>
67	<button class="b2">立即支付</button>	65	<button class="b2">立即支付</button>
68	</view>	66	</view>
69	</view>	67	</view>
70	</template>	68	</template>
71		69
72	<script>	70	<script>
		71	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
73	export default {	72	export default {
		73	components: {
		74	UniCountdown
		75	},
74	data() {	76	data() {
75	return {	77	return {
76	scrollHeight: false,	78	scrollHeight: false,
77	}	79	}
78	},	80	},
79	methods: {	81	methods: {
80		82
81	}	83	}
82	}	84	}
83	</script>	85	</script>
84		86
85	<style lang="scss" scoped>	87	<style lang="scss" scoped>
86	.content{	88	.content{
87	display: flex;	89	display: flex;
88	flex-direction: column;	90	flex-direction: column;
89	justify-content: center;	91	justify-content: center;
90	align-items: center;	92	align-items: center;
		93	background-color: #f2f2f2;
91	}	94	}
92		95
93	.header{
94	display: flex;
95	flex-direction: column;
96	align-items: center;
97	justify-content: center;
98	width: 100%;
99	height: 44px;
100	position: fixed;
101	top: 0;
102	z-index: 999;
103	background-color: #fff;
104	.header-name{
105	display: flex;
106	align-items: center;
107	width: 670rpx;
108	image {
109	width: 11px;
110	height: 18px;
111	}
112	text {
113	// font-family: PingFangSC-Regular;
114	font-size: 36rpx;
115	color: #333333;
116	letter-spacing: -0.34px;
117	margin: 0 0 10rpx 54rpx;
118	}
119	}
120	}
121		96
122	.scroll-view {	97	.order {
123	// height: 1760rpx; // 测试	98	min-height: 1196rpx;
		99	margin-bottom: 112rpx;
124	background: #F2F2F2;	100	background: #F2F2F2;
125	}	101	}
126	.order-hr {	102	.order-hr {
127	width: 100%;	103	width: 100%;
128	height: 1px;	104	height: 1px;
129	background-color: #E9E9E9;	105	background-color: #E9E9E9;
130	}	106	}
131	.order-time {	107	.order-time {
132	width: 100%;	108	width: 100%;
133	height: 140rpx;	109	height: 140rpx;
134	background-color: #fff;	110	background-color: #fff;
135	display: flex;	111	display: flex;
136	justify-content: center;	112	justify-content: center;
137	text {	113	text {
138	// font-family: PingFangSC-Regular;	114	// font-family: PingFangSC-Regular;
139	margin-top: 48rpx;	115	margin-top: 48rpx;
140	font-size: 14px;	116	font-size: 14px;
141	color: #333333;	117	color: #333333;
142	letter-spacing: -0.26px;	118	letter-spacing: -0.26px;
143	}	119	}
144	.p2 {	120	.p2 {
145	// font-family: DINAlternate-Bold;	121	// font-family: DINAlternate-Bold;
146	margin: 42rpx 20rpx 0 20rpx;	122	margin: 42rpx 20rpx 0 20rpx;
147	font-size: 18px;	123	font-size: 18px;
148	color: #EC5D3B;	124	color: #EC5D3B;
149	letter-spacing: -0.34px;	125	letter-spacing: -0.34px;
150	}	126	}
151	}	127	}
152		128
153	.order-user {	129	.order-user {
154	width: 670rpx;	130	width: 670rpx;
155	height: 228rpx;	131	height: 228rpx;
156	background: #FFFFFF;	132	background: #FFFFFF;
157	border-radius: 14rpx;	133	border-radius: 14rpx;
158	margin: 0 auto;	134	margin: 0 auto;
159	margin-top: 20rpx;	135	margin-top: 20rpx;
160	margin-bottom: 20rpx;	136	margin-bottom: 20rpx;
161	.order-user-head {	137	.order-user-head {
162	display: flex;	138	display: flex;
163	height: 108rpx;	139	height: 108rpx;
164	width: 100%;	140	width: 100%;
165	align-items: center;	141	align-items: center;
166	margin-left: 126rpx;	142	margin-left: 126rpx;
167	.p1 {	143	.p1 {
168	// font-family: PingFangSC-Regular;	144	// font-family: PingFangSC-Regular;
169	font-size: 14px;	145	font-size: 14px;
170	color: #333333;	146	color: #333333;
171	letter-spacing: -0.26px;	147	letter-spacing: -0.26px;
172	margin-right: 20rpx;	148	margin-right: 20rpx;
173	}	149	}
174	.p2 {	150	.p2 {
175	// font-family: PingFangSC-Regular;	151	// font-family: PingFangSC-Regular;
176	font-size: 14px;	152	font-size: 14px;
177	color: #999999;	153	color: #999999;
178	letter-spacing: -0.26px;	154	letter-spacing: -0.26px;
179	}	155	}
180	}	156	}
181	.order-user-body {	157	.order-user-body {
182	display: flex;	158	display: flex;
183	width: 100%;	159	width: 100%;
184	image{	160	image{
185	width: 24px;	161	width: 24px;
186	height: 26px;	162	height: 26px;
187	margin: 12rpx 32rpx 0 40rpx;	163	margin: 12rpx 32rpx 0 40rpx;
188	}	164	}
189	.p3 {	165	.p3 {
190	// font-family: PingFangSC-Semibold;	166	// font-family: PingFangSC-Semibold;
191	font-size: 14px;	167	font-size: 14px;
192	color: #333333;	168	color: #333333;
193	letter-spacing: -0.26px;	169	letter-spacing: -0.26px;
194	}	170	}
195	}	171	}
196	}	172	}
197		173
198	.order-info {	174	.order-info {
199	width: 670rpx;	175	width: 670rpx;
200	background-color: #fff;	176	background-color: #fff;
201	box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);	177	box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06);
202	border-radius: 16rpx;	178	border-radius: 16rpx;
203	margin: 0 auto;	179	margin: 0 auto;
204	view{	180	view{
205	margin-left: 40rpx;	181	margin-left: 40rpx;
206	}	182	}
207	text{	183	text{
208	font-size: 14px;	184	font-size: 14px;
209	}	185	}
210	.order-info-head {	186	.order-info-head {
211	display: flex;	187	display: flex;
212	padding-top: 40rpx;	188	padding-top: 40rpx;
213	image{	189	image{
214	height: 188rpx;	190	height: 188rpx;
215	width: 188rpx;	191	width: 188rpx;
216	}	192	}
217	.order-info-head-r{	193	.order-info-head-r{
218	margin: 0;	194	margin: 0;
219	width: 368rpx;	195	width: 368rpx;
220	margin-left: 24rpx;	196	margin-left: 24rpx;
221	// margin-top: 40rpx;	197	// margin-top: 40rpx;
222	text{	198	text{
223	display: block;	199	display: block;
224	}	200	}
		201	// .arrow{
		202	// width: 0;
		203	// height: 0;
		204	// border-left: 5px transparent;
		205	// border-right: 5px transparent;
		206	// border-top: 5px #979797;
		207	// border-bottom: 0 transparent;
		208	// border-style: solid;
		209	// position: relative;
		210	// // transform: scaleY(-1);
		211	// }
		212	// .arrow::after{
		213	// content: '';
		214	// position: absolute;
		215	// top: -6.5px;
		216	// left: -5px;
		217	// border-left: 5px transparent;
		218	// border-right: 5px transparent;
		219	// border-top: 5px #FFFFFF;
		220	// border-bottom: 0 transparent;
		221	// border-style: solid;
		222	// }
225	.p1 {	223	.p1 {
226	height: 40px;	224	min-height: 40px;
227	// font-family: PingFangSC-Regular;	225	// font-family: PingFangSC-Regular;
228	font-size: 14px;	226	font-size: 14px;
229	color: #333333;	227	color: #333333;
230	letter-spacing: -0.26px;	228	letter-spacing: -0.26px;
231	line-height: 18px;	229	line-height: 18px;
232	// line-height: 20px;	230	// line-height: 20px;
233	}	231	}
234	.p2 {	232	.p2 {
235	height: 34px;	233	height: 34px;
236	padding: 1px 0 3px 0;	234	padding: 1px 0 3px 0;
237	// font-family: PingFangSC-Regular;	235	// font-family: PingFangSC-Regular;
238	font-size: 12px;	236	font-size: 12px;
239	color: #999999;	237	color: #999999;
240	letter-spacing: -0.23px;	238	letter-spacing: -0.23px;
241	}	239	}
242	.p3 {	240	.p3 {
243	height: 20px;	241	height: 20px;
244	// font-family: PingFangSC-Regular;	242	// font-family: PingFangSC-Regular;
245	font-size: 14px;	243	font-size: 14px;
246	color: #FF6B4A;	244	color: #FF6B4A;
247	letter-spacing: -0.26px;	245	letter-spacing: -0.26px;
248	}	246	}
		247	.p4{
		248	font-size: 12px;
		249	color: #999999;
		250	letter-spacing: -0.23px;
		251	margin-left: 10px;
		252	}
249	}	253	}
250		254
251	}	255	}
252	.order-info-goodsnum {	256	// .order-info-goodsnum {
253	display: flex;	257	// display: flex;
254	align-items: center;	258	// align-items: center;
255	justify-content: flex-end;	259	// justify-content: flex-end;
256	text {	260	// text {
257	margin-right: 44rpx;	261	// margin-right: 44rpx;
258	// ont-family: PingFangSC-Regular;	262	// // ont-family: PingFangSC-Regular;
259	font-size: 12px;	263	// font-size: 12px;
260	color: #999999;	264	// color: #999999;
261	letter-spacing: -0.23px;	265	// letter-spacing: -0.23px;
262	}	266	// }
263	}	267	// }
264	.order-info-freight {	268	.order-info-freight {
265	display: block;	269	display: block;
266	margin-left: 40rpx;	270	margin-left: 40rpx;
267	margin-top: 22rpx;	271	margin-top: 22rpx;
268	.p1{	272	.p1{
269	// font-family: PingFangSC-Regular;	273	// font-family: PingFangSC-Regular;
270	font-size: 14px;	274	font-size: 14px;
271	color: #333333;	275	color: #333333;
272	letter-spacing: -0.26px;	276	letter-spacing: -0.26px;
273	line-height: 18px;	277	line-height: 18px;
274	margin-right: 24px;	278	margin-right: 24px;
275	}	279	}
276	.p2 {	280	.p2 {
277	// font-family: PingFangSC-Regular;	281	// font-family: PingFangSC-Regular;
278	font-size: 14px;	282	font-size: 14px;
279	color: #FF6B4A;	283	color: #FF6B4A;
280	letter-spacing: -0.26px;	284	letter-spacing: -0.26px;
281	}	285	}
282	}	286	}
283	.order-info-discount {	287	.order-info-discount {
284	display: block;	288	display: block;
285	margin-left: 40rpx;	289	margin-left: 40rpx;
286	margin-top: 24rpx;	290	margin-top: 24rpx;
287	.p1 {	291	.p1 {
288	// font-family: PingFangSC-Regular;	292	// font-family: PingFangSC-Regular;
289	font-size: 14px;	293	font-size: 14px;
290	color: #333333;	294	color: #333333;
291	letter-spacing: -0.26px;	295	letter-spacing: -0.26px;
292	line-height: 18px;	296	line-height: 18px;
293	margin-right: 24px;	297	margin-right: 24px;
294	}	298	}
295	.p2 {	299	.p2 {
296	// font-family: PingFangSC-Regular;	300	// font-family: PingFangSC-Regular;
297	font-size: 14px;	301	font-size: 14px;
298	color: #FF6B4A;	302	color: #FF6B4A;
299	letter-spacing: -0.26px;	303	letter-spacing: -0.26px;
300	}	304	}
301	}	305	}
302	.order-info-price {	306	.order-info-price {
303	display: block;	307	display: block;
304	margin-left: 40rpx;	308	margin-left: 40rpx;
305	margin-top: 24rpx;	309	margin-top: 24rpx;
306	.p1 {	310	.p1 {
307	// font-family: PingFangSC-Semibold;	311	// font-family: PingFangSC-Semibold;
308	font-size: 14px;	312	font-size: 14px;
309	color: #333333;	313	color: #333333;
310	letter-spacing: -0.26px;	314	letter-spacing: -0.26px;
311	line-height: 18px;	315	line-height: 18px;
312	margin-right: 24px;	316	margin-right: 24px;
313	}	317	}
314	.p2 {	318	.p2 {
315	// font-family: PingFangSC-Semibold;	319	// font-family: PingFangSC-Semibold;
316	font-size: 14px;	320	font-size: 14px;
317	color: #FF6B4A;	321	color: #FF6B4A;
318	letter-spacing: -0.26px;	322	letter-spacing: -0.26px;
319	}	323	}
320	}	324	}
321	.order-info-num{	325	.order-info-num{
322	display: block;	326	display: block;
323	margin-left: 40rpx;	327	margin-left: 40rpx;
324	margin-top: 44rpx;	328	margin-top: 44rpx;
325	text{	329	text{
326	// font-family: PingFangSC-Regular;	330	// font-family: PingFangSC-Regular;
327	font-size: 12px;	331	font-size: 12px;
328	color: #999999;	332	color: #999999;
329	letter-spacing: -0.23px;	333	letter-spacing: -0.23px;
330	}	334	}
331	}	335	}
332	.order-info-time {	336	.order-info-time {
333	display: block;	337	display: block;
334	margin: 8rpx 0 48rpx 40rpx;	338	margin: 8rpx 0 48rpx 40rpx;
335	text{	339	text{
336	// font-family: PingFangSC-Regular;	340	// font-family: PingFangSC-Regular;
337	font-size: 12px;	341	font-size: 12px;
338	color: #999999;	342	color: #999999;
339	letter-spacing: -0.23px;	343	letter-spacing: -0.23px;
340	}	344	}
341	}	345	}
342	.order-info-hr{	346	.order-info-hr{
343	width: 520rpx;	347	width: 520rpx;
344	height: 1px;	348	height: 1px;
345	background-color: #E9E9E9;	349	background-color: #E9E9E9;
346	margin-bottom: 20rpx;	350	margin-bottom: 20rpx;
347	}	351	}
348	.order-info-contact {	352	.order-info-contact {
349	display: flex;	353	display: flex;
350	padding-bottom: 28rpx;	354	padding-bottom: 28rpx;
351	image{	355	image{
352	width: 19px;	356	width: 19px;
353	height: 16px;	357	height: 16px;
354	}	358	}
355	text {	359	text {
356	// font-family: PingFangSC-Regular;	360	// font-family: PingFangSC-Regular;
357	margin-left: 20rpx;	361	margin-left: 20rpx;
358	font-size: 14px;	362	font-size: 14px;
359	color: #333333;	363	color: #333333;
360	letter-spacing: -0.26px;	364	letter-spacing: -0.26px;
361	line-height: 18px;	365	line-height: 18px;
362	}	366	}
363	}	367	}
364	}	368	}

src/pages/predelivery/predelivery.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="container">
	3	<view v-for="(items) in form" :key="items.key" class="order">
	4	<view class="order_number">订单号：{{items.orderNum}}<span>待发货</span></view>
	5	<view class="order_detail">
	6	<view class="detail_img"><image v-bind:src="items.img"></image></view>
	7	<view class="detail_zi">
	8	<view class="zi_name">{{items.name}}</view>
	9	<view class="zi_standard">规格：{{items.standard}}</view>
	10	<view class="zi_preprice">￥{{items.preprice}}<span>X{{items.number}}</span></view>
	11	</view>
	12	</view>
	13	<view class="now_price">实付：<span>￥{{items.nowprice}}</span></view>
	14	<view class="clear"></view>
	15	<view class="button">
	16	<view class="button1">申请退款</view>
	17	<view class="button2">提醒发货</view>
	18	</view>
	19	</view>
	20	</view>
	21	</template>
	22
	23	<script>
	24	export default {
	25	data(){
	26	return{
	27	form:[
	28	{
	29	key: 0,
	30	name:'商品名称',
	31	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
	32	img: '/static/img/detail/delivery.png',
	33	preprice: 180,
	34	number:1,
	35	orderNum: 2034867958596334,
	36	nowprice: 110,
	37	}
	38	]
	39
	40	}
	41	}
	42	}
	43	</script>
	44
	45	<style lang="scss">
	46	.container{
	47	width: 100%;
	48	height: 100%;
	49	background: #F2F2F2;
	50	height: 700px;
	51	//要获取屏幕大小
	52	}
	53
	54	.order{
	55	background: #FFFFFF;
	56	width: 90%;
	57	height: 450rpx;
	58	margin: 0 auto;
	59	padding: 40rpx;
	60	box-sizing: border-box;
	61	border-radius: 5px;
	62	}
	63	.order_number{
	64	color: #999999;
	65	font-size: 12px;
	66	font-family: "PingFangSC-Regular";
	67	span{
	68	font-family: PingFangSC-Regular;
	69	font-size: 14px;
	70	color: #FF6B4A;
	71	letter-spacing: -0.26px;
	72	line-height: 18px;
	73	float: right;
	74	}
	75	}
	76	.order_detail{
	77	display: flex;
	78	justify-content: space-around;
	79	margin-top: 12px;
	80	}
	81	.detail_img image{
	82	width: 188rpx;
	83	height: 188rpx;
	84	}
	85	.detail_zi{
	86	font-family: PingFangSC-Regular;
	87	width: 55%;
	88	height: 100%;
	89	view{
	90	margin-bottom: 20rpx;
	91	}
	92	.zi_name{
	93	font-size: 14px;
	94	color: #333333;
	95	letter-spacing: -0.26px;
	96	line-height: 18px;
	97	}
	98	.zi_standard{
	99	font-size: 12px;
	100	color: #999999 ;
	101	}
	102	.zi_preprice{
	103	font-size: 14px;
	104	color: #FF6B4A;
	105	span{
	106	float: right;
	107	font-size: 12px;
	108	color: #999999;
	109	}
	110	}
	111	}
	112	.now_price{
	113	font-size: 14px;
	114	color: #333333;
	115	float: right;
	116	span{
	117	font-size: 14px;
	118	color: #FF6B4A ;
	119	}
	120	}
	121	.clear{
	122	clear: both;
	123	}
	124	.button{
	125	display: flex;
	126	justify-content: flex-end;
	127	margin-top: 14px;
	128	view{
	129	width: 156rpx;
	130	height: 48rpx;
	131	border-radius: 12px;
	132	font-size: 12px;
	133	text-align: center;
	134	line-height: 20px;
	135	}
	136	.button1{
	137	border: 1px solid #FF6B4A;
	138	font-family: PingFangSC-Regular;
	139	color: #FF6B4A;
	140	letter-spacing: -0.23px;
	141	margin-right: 30rpx;
	142	}
	143	.button2{
	144	border: 1px solid #FF6B4A;
	145	background: #FF6B4A;
	146	font-family: PingFangSC-Regular;
	147	color: #FFFFFF;
	148	letter-spacing: -0.23px;
	149
	150	}
	151	}
	152	</style>

src/pages/refundment/refundWays.vue

Diff comments View file @f1da24f

File was created	1	<template>
	2	<view class="container" v-bind:style="{height: curheight+'px'}">
	3	<view class="refund" v-for="(items) in refund" :key="items.key">
	4	<view class="detail">
	5	<view class="detail_img"><image v-bind:src="items.img"></image></view>
	6	<view class="detail2">
	7	<view class="detail_name">{{items.name}}</view>
	8	<view class="detail_standard">规格：{{items.standard}}</view>
	9	<view class="detail_price">
	10	<span>￥{{items.price}}</span>
	11	<span>X{{items.number}}</span>
	12	</view>
	13	</view>
	14	</view>
	15	<view class="refund_price">
	16	<span class="refund_price1">退款金额</span>
	17	<span class="refund_price2">￥{{items.refundprice}}</span>
	18	</view>
	19	<view class="refund_reason">
	20	<view>仅退款<image src="/static/img/detail/xiala.png"></image></view>
	21	</view>
	22	<view class="refund_reason">
	23	<view>退款退货<image src="/static/img/detail/xiala.png"></image></view>
	24	</view>
	25	<view class="refund_reason">
	26	<view>换货<image src="/static/img/detail/xiala.png"></image></view>
	27	</view>
	28	</view>
	29	</view>
	30	</template>
	31
	32	<script>
	33	export default {
	34	//获取浏览器高度
	35	beforeMount(height){
	36	var h = document.documentElement.clientHeight \|\| document.body.clientHeight;
	37	this.curheight = h-44;
	38
	39	},
	40	data(){
	41	return{
	42	curheight:0, //浏览器高度
	43	refund:[
	44	{
	45	key:0,
	46	img:'/static/img/detail/d1.png',
	47	name:'商品名称',
	48	standard:'玫瑰金/钛合金/防日光防紫外线/超薄超轻',
	49	price: 180,
	50	number: 1,
	51	refundprice: 110,
	52	refund_img:'/static/img/detail/refund_img.png',
	53	}
	54	],
	55	}
	56	}
	57	}
	58	</script>
	59
	60	<style lang="scss">
	61
	62	.container{
	63	background: #F2F2F2;
	64	padding-top: 10px;
	65	box-sizing: border-box;
	66	}
	67	.refund{
	68	width: 90%;
	69	height: 300px;
	70	margin: 0 auto;
	71	background: #FFFFFF;
	72	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
	73	border-radius: 8px;
	74	padding: 14px;
	75	box-sizing: border-box;
	76	}
	77	.detail{
	78	display: flex;
	79	justify-content: space-between;
	80	font-family: PingFangSC-Regular;
	81	margin-bottom: 20px;
	82	.detail2{
	83	width: 64%;
	84	view{
	85	margin-bottom: 8px;
	86	}
	87	.detail_name{
	88	font-size: 14px;
	89	color:#333333;
	90	}
	91	.detail_standard{
	92	font-size: 12px;
	93	color: #999999;
	94	}
	95	.detail_price{
	96	font-size: 14px;
	97	color: #999999;
	98	display: flex;
	99	justify-content: space-between;
	100	}
	101	}
	102	.detail_img{
	103	width: 188rpx;
	104	height: 188rpx;
	105	border-radius: 40px;
	106	image{
	107	width: 100%;
	108	height: 100%;
	109	}
	110	}
	111	}
	112
	113	.refund_price{
	114	font-family: PingFangSC-Semibold;
	115	font-size: 14px;
	116	color: #333333;
	117	letter-spacing: -0.26px;
	118	line-height: 18px;
	119	margin-bottom: 26px;
	120	.refund_price1{
	121	font-weight: bold;
	122	margin-right: 16px;
	123	}
	124	.refund_price2{
	125	color: #FF6B4A;
	126	}
	127	}
	128	.refund_reason{
	129	margin-top: 16px;
	130	margin-bottom: 16px;
	131	font-family: PingFangSC-Regular;
	132	font-size: 12px;
	133	color: #333333;
	134	letter-spacing: -0.23px;
	135	line-height: 18px;
	136	view{
	137	display: inline-block;
	138	font-size: 12px;
	139	color: #333333;
	140	letter-spacing: -0.23px;
	141	line-height: 18px;
	142	width: 90%;
	143	image{
	144	width: 30rpx;
	145	height: 24rpx;
	146	float: right;
	147	}
	148	}
	149	}
	150
	151
	152	</style>

src/pages/user/user.vue

Diff comments View file @f1da24f

 <template>
 	<view class="wrap">
 		<view class="content">
 			<view class="userInfo">
 				<view class="info">
 					<image src="../../static/img/detail/d10.png" mode="aspectFill"></image>
 					<view class="infoText">
 						<text class="userName">{{userName}}</text>
 						<text class="nickName">用户名：骆驼不死的祥子</text>
 					</view>
 				</view>
 				<view class="service">
 					<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
 				</view>
 			</view>
 			<view class="myOrder">
 				<view class="orderHeader">
 					<text>全部订单</text>
 					<view class="btn" @click="toMyOrder">
 						全部
 						<image src="../../static/right.png" mode="aspectFill"></image>
 					</view>
 				</view>
 				<view class="orderBody">
-					<view class="item,waitPay" @click=toMyOrderPaying>
+					<view class="item waitPay" @click="toMyOrderPaying">
-						<image src="../../static/waitPay.png" mode="aspectFill"></image>
+						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待付款</text>
 					</view>
-					<view class="item,waitDeliver" @click=toPredelivery>
+					<view class="item waitDeliver" @click="toPredelivery" >
 						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待发货</text>
 					</view>
-					<view class="item,waitReceive">
+					<view class="item waitReceive" @click="torefunProgress">
 						<image src="../../static/waitReceive.png" mode="aspectFill"></image>
 						<text>待收货</text>
 					</view>
-					<view class="item,service">
+					<view class="item service" @click="torefundment">
 						<image src="../../static/service.png" mode="aspectFill"></image>
 						<text>退换/售后</text>
 					</view>
 				</view>
 			</view>
 			<view class="recommend">
 				<view class="title">
 					<view class="line"></view>
 					<view class="text">精选推荐</view>
 					<view class="line"></view>
 				</view>
 				<!-- 商品列表 -->
 				<view class="goods-list">
 					<view class="product-list">
 						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
 							<Card :goods = "goods"></Card>
 						</view>
 					</view>
 					<view class="loading-text">{{loadingText}}</view>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
 	import Card from "@/components/CommodityCard/CommodityCard.vue"
 	export default {
 		components: {
 			'Card':Card
 			},
 		data() {
 			return {
 				//商品数据
 				goodsList:[
-					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
 				],
 				headerphoto:'',
 				userName:'Adam'
 			}
 		},
 		onLoad() {
 		},
 		methods: {
 			toMyOrder(){
 				uni.navigateTo({
-					url: '../myOrder/myOrder',
+					url: '../myOrder/myOrder?current=0',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toPredelivery(){
 				uni.navigateTo({
-					url: '../Predelivery/Predelivery',
+					url: '../myOrder/myOrder?current=2',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
 			},
 			toMyOrderPaying(){
 				uni.navigateTo({
-					url: '../myorder-paying/myorder-paying',
+					url: '../myOrder/myOrder?current=1',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			torefundment(){
+				uni.navigateTo({
+					url:'../refundment/refundment',
+				})
+			},
+			torefunProgress(){
+				uni.navigateTo({
+					url:'../refundProgress/refundProgress'
+				})
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.warp{
 		font-size: 24rpx;
 		background-color: #f2f2f2;
 		height: 100vh;
 	}
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		background-color: #F2F2F2;
 	}
 	.userInfo{
 		background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
 		width: 100%;
 		height: 240rpx;
 		color: #FFFFFF;
 		padding: 60rpx 82rpx 80rpx 44rpx;
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: flex-start;
 		.info{
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			image{
 				border-radius: 50rpx;
 				height: 100rpx ;
 				width: 100rpx;
 				margin-right: 40rpx;
 			}
 			.infoText{
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				align-items: flex-scetart;
 				.userName{
 					font-size: 18px;
 					color: #FFFFFF;
 					margin-bottom: 8rpx;
 				}
 				.nickName{
 					font-size: 12px;
 					color: #FFFFFF;
 				}
 			}
 		}
 		.service{
 			image{
 				height: 36rpx;
 				width: 36rpx;
 			}
 		}
 	}
 	.myOrder{
 		width: 100%;
 		height: 296rpx;
 		margin-top: 20rpx;
 		margin-bottom: 20rpx;
 		padding: 0 40rpx;
 		box-sizing: border-box;
 		background: #FFFFFF;
 		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
 		border-radius: 6px;
 		border-radius: 6px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-around;
 		align-items: center;
 		.orderHeader{
 			width: 100%;
 			height: 100rpx;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			border-bottom: 1px solid #E9E9E9;;
 			font-weight: bold;
 			font-size: 18px;
 			color: #333333;
 			.btn{
 				font-size: 12px;
 				color: #999999;
 				image{
 					margin-left: 20rpx;
 					height: 16rpx;
 					width: 8rpx;
 				}
 			}
 		}
 		.orderBody{
 			width: 100%;
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
 			.item{
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				image{
 					width: 46rpx;
 					height: 46rpx;
 				}
 				text{
 					margin-top: 24rpx;
 					font-size: 12px;
 					color: #333333;
 				}
 			}
 		}
 	}
 	.recommend{
 		background: #FFFFFF;
 		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
 		border-radius: 6px;
 		border-radius: 6px;
+		width: 100%;
 		.title{
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			justify-content: space-between;
 			padding: 20rpx 40rpx;
 			.line{
 				width: 264rpx;
 				height: 1rpx;
 				border-bottom: 1px solid #EAEAEA;
 			}
 			.text{
 				font-family: PingFangSC-Medium;
 				font-size: 14px;
 				color: #333333;
 				letter-spacing: -0.26px;
 				text-align: justify;
 				line-height: 24px;
 			}
 		}
 		.goods-list{
 			.loading-text{
 				width: 100%;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				height: 30px;
 				color: #979797;
 				font-size: 12px;
 			}
 			.product-list{
 				width: 92%;
 				padding: 0 4% 3vw 4%;
 				display: flex;
 				justify-content: space-between;
 				flex-wrap: wrap;
 				.product{
 					width: 48%;
 					margin: 0 0 20rpx 0;
 					background: #FFFFFF;
 					border: 1px solid #F2F2F2;
 				}
 			}
 		}
 	}
 </style>

src/static/img/detail/Kuang/g1.png

Diff comments View file @f1da24f

9.28 KB

src/static/img/detail/Kuang/g2.png

Diff comments View file @f1da24f

8.61 KB

src/static/img/detail/Kuang/g3.png

Diff comments View file @f1da24f

7.95 KB

src/static/img/detail/Kuang/s1.png

Diff comments View file @f1da24f

7.61 KB

src/static/img/detail/Kuang/s2.png

Diff comments View file @f1da24f

7.83 KB

src/static/img/detail/Kuang/s3.png

Diff comments View file @f1da24f

7.28 KB

src/static/img/detail/Kuang/s4.png

Diff comments View file @f1da24f

7.69 KB

src/static/img/detail/Kuang/s5.png

Diff comments View file @f1da24f

7.39 KB

src/static/img/detail/Kuang/s6.png

Diff comments View file @f1da24f

7.27 KB

src/static/img/detail/Kuang/s7.png

Diff comments View file @f1da24f

7.6 KB

src/static/img/detail/Kuang/sun_jp.png

Diff comments View file @f1da24f

2.5 KB

src/static/img/detail/sun_glass.png

Diff comments View file @f1da24f

25.2 KB

src/store/modules/categoryOrder.js

Diff comments View file @f1da24f

File was created	1	import urlAlias from '../url';
	2	import request from '../request';
	3
	4	const {
	5	category
	6	} = urlAlias;
	7
	8	const state = {
	9	categoryList: [],
	10	};
	11
	12	const mutations = {
	13	INIT: (state, categoryList) => {
	14	state.categoryList = categoryList;
	15	},
	16	};
	17
	18	const actions = {
	19	fetch({ commit }, param) {
	20	request({
	21	url: category,
	22	success: (res) => {
	23	commit('INIT', res.data.data)
	24	},
	25	fail: (res) => {
	26	console.log("fail status === > ", res);
	27	},
	28	complete: (res) => {
	29	console.log("complete status === > ", res);
	30	},
	31	})
	32	},
	33	};
	34
	35	export default {
	36	namespaced: true,
	37	state,
	38	mutations,
	39	actions,
	40	};
	41

src/store/modules/myOrder.js

Diff comments View file @f1da24f

File was created	1	import urlAlias from '../url';
	2	import request from '../request';
	3
	4	const {
	5	orderList
	6	} = urlAlias;
	7
	8	const data = {
	9	data: [
	10	{
	11	finished_time: null,
	12	is_refound: "0",
	13	mch_id: "1436019502",
	14	money_of_dcw: "0",
	15	money_of_partner: "0",
	16	money_of_shop: "0",
	17	orderJudge: false,
	18	order_info: {
	19	address:{
	20	cityName: "镇江市",
	21	countyName: "丹阳市",
	22	detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
	23	errMsg: "chooseAddress:ok",
	24	nationalCode: "321181",
	25	postalCode: "212300",
	26	provinceName: "江苏省",
	27	telNumber: "15896379277",
	28	userName: "点餐汪客服",
	29	},
	30	cartinfo:['11', '12'],
	31	keyname: "1_1587129366",
	32	lefttime: 179995,
	33	list:[
	34	{
	35	cart_id: "11",
	36	imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
	37	img_index_url: null,
	38	memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
	39	mp_id: "1",
	40	nowPrice: 100,
	41	num: "2",
	42	oldPrice: "0",
	43	p_discount: "1",
	44	p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
	45	p_root_index: "1",
	46	p_sale_price: "0",
	47	peopleName: "me",
	48	pics: '',
	49	pid: "4",
	50	sk_id: "38",
	51	},
	52	],
	53	orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
	54	total_fee: 100
	55	},
	56	partner_uid: "0",
	57	pay_cate: "2020",
	58	pay_id: "3",
	59	pay_time: "2020-04-17 21:16:12",
	60	pay_wood_desc: "在【非常戴镜】的微信付款凭证",
	61	pay_wood_id: "fcdj-1-1_1587129366",
	62	prepay_id: "wx172116124528226bf1a8adad1662456500",
	63	re_check_staus: "0",
	64	shopid: "0",
	65	split_userid: "0",
	66	status: "1",
	67	total_fee: "100",
	68	uid: "1",
	69	}
	70	],
	71	msg: "订单列表",
	72	status: 0,
	73	}
	74
	75	const state = {
	76	orderList: [],
	77	};
	78
	79	const mutations = {
	80	INIT: (state, data) => {
	81	state.orderList = data;
	82	},
	83	};
	84
	85	const actions = {
	86	getList({ commit }, param) {
	87	request({
	88	url: orderList,
	89	data: param,
	90	success: (res) => {
	91	const resData = {
	92	...res,
	93	data,
	94	}
	95	console.log('data.data', resData.data.data);
	96	commit("INIT", resData.data.data);
	97	},
	98	})
	99	}
	100	}
	101
	102	export default {
	103	namespaced: true,
	104	state,
	105	mutations,
	106	actions,
	107	}

src/store/modules/test.js

Diff comments View file @f1da24f

+ import urlAlias from '../url';
+ import request from '../request';
+ const {
+  shopList
+ } = urlAlias;
 const state = {
   list: [],
 };
 const mutations = {
   INIT: (state, list) => {
     state.list = list;
   },
 };
 const actions = {
   fetch({ commit }, param) {
-    uni
+    request({
-      .request({
+      url: shopList,
-        url: "https://api.glass.xiuyetang.com/app/prod/list",
+      success: (res) => {
-        method: "post",
+        commit('INIT', res.data.data)
-        data: {},
+      },
-        header: {
+      fail: (res) => {
-          "Content-Type": "application/x-www-form-urlencoded",
+        console.log("fail status === > ", res);
-        },
+      },
-        timeout: 3000,
+      complete: (res) => {
-        withCredentials: false,
+        console.log("complete status === > ", res);
-        success: (res) => {
+      },
-          commit('INIT', res.data.data)
+    })
-        },
+    // uni
-        fail: (res) => {
+    //   .request({
-          console.log("fail status === > ", res);
+    //     url: "https://api.glass.xiuyetang.com/app/prod/list",
-        },
+    //     method: "post",
-        complete: (res) => {
+    //     data: {},
-          console.log("complete status === > ", res);
+    //     header: {
-        },
+    //       "Content-Type": "application/x-www-form-urlencoded",
-      });
+    //     },
+    //     timeout: 3000,
+    //     withCredentials: false,
+    //     success: (res) => {
+    //       commit('INIT', res.data.data)
+    //     },
+    //     fail: (res) => {
+    //       console.log("fail status === > ", res);
+    //     },
+    //     complete: (res) => {
+    //       console.log("complete status === > ", res);
+    //     },
+    //   });
   },
 };
 export default {
   namespaced: true,
   state,
   mutations,
   actions,
 };

src/store/request.js

Diff comments View file @f1da24f

File was created	1	const DOMAIN = 'https://api.glass.xiuyetang.com';
	2
	3	export default async function request({
	4	url,
	5	method = "post",
	6	data = {},
	7	header = {
	8	"Content-Type": "application/x-www-form-urlencoded",
	9	},
	10	timeout = 3000,
	11	withCredentials = false, // 跨域请求时是否携带凭证（cookies）
	12	// sslVerify: true, // 验证 ssl 证书
	13	success,
	14	fail = (res) => {
	15	console.log("fail status === > ", res);
	16	},
	17	complete = (res) => {
	18	console.log("complete status === > ", res);
	19	},
	20	}) {
	21	console.log("DOMAIN", DOMAIN, url);
	22	uni
	23	.request({
	24	url: DOMAIN + url,
	25	method,
	26	data,
	27	header,
	28	timeout,
	29	withCredentials,
	30	success,
	31	fail,
	32	complete,
	33	})
	34	}

src/store/url.js

Diff comments View file @f1da24f

File was created	1	const urlAlias = {
	2	// 获取首页商品列表
	3	shopList: '/app/prod/list',
	4
	5	// 获取首页商品列表
	6	category: '/app/prod/category',
	7	}
	8
	9	export default urlAlias;
	10