刘文博 / gulu-vue

Browse Code »

Commit 280fcb85bf08c0a7b835f7e60b3375db0601d6c2

Authored by 吉鹏 2020-06-06 21:54:02 +0800

2 parents e40e790a30 3cda19af7e

Exists in master

Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue

Showing 8 changed files Show diff stats

src/pages.json

Diff comments View file @280fcb8

 {
     "pages": [
         {
             "path": "pages/index/index",
             "style": {
                 "navigationBarTitleText": "商城一览"
             }
         },
         {
             "path": "pages/user/user",
             "style": {
                 "navigationBarTitleText": "我的"
             }
         },
         {
             "path": "pages/addOpticsData/addOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         },
         {
             "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
             "style": {
                 "navigationBarTitleText": "镜片名称名称"
             }
         },
         {
             "path": "pages/purchaseLenses/purchaseLenses",
             "style": {
                 "navigationBarTitleText": "参数选择"
             }
         },
         {
             "path": "pages/lensDetails/lensDetails",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         {
+            "path": "pages/details/details",
+            "style": {
+                "navigationBarTitleText": "产品详情"
+            }
+        },
+        {
             "path": "pages/myOrderPaying/myOrderPaying",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/myOrder/myOrder",
             "style": {
                 "navigationBarTitleText": "我的订单"
             }
         },
         {
             "path": "pages/cart/cart",
             "style": {
                 "navigationBarTitleText": "购物车"
             }
         },
         {
             "path": "pages/frameDetail/frameDetail",
             "style": {
                 "navigationBarTitleText": "产品详情"
             }
         },
         // {
         //     "path": "pages/refundProgress/refundProgress",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         // {
         //     "path": "pages/address/addAddress",
         //     "style": {
         //         "navigationBarTitleText": "新增地址"
         //     }
         // },
         // {
         //     "path": "pages/address/addressList",
         //     "style": {
         //         "navigationBarTitleText": "地址管理"
         //     }
         // },
         {
             "path": "pages/confirmOrder/confirmOrder",
             "style": {
                 "navigationBarTitleText": "确认订单"
             }
         },
         // {
         //     "path": "pages/refundment/refundWays",
         //     "style": {
         //         "navigationBarTitleText": "退款方式"
         //     }
         // },
         // {
         //     "path": "pages/refundment/refundment",
         //     "style": {
         //         "navigationBarTitleText": "申请退款"
         //     }
         // },
         {
             "path": "pages/predelivery/predelivery",
             "style": {
                 "navigationBarTitleText": "待发货"
             }
         },
         {
             "path": "pages/customerService/customerService",
             "style": {
                 "navigationBarTitleText": "在线客服"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_sun",
             "style": {
                 "navigationBarTitleText": "太阳镜选购页"
             }
         },
         {
             "path": "pages/detailStandard/detailStandard_k",
             "style": {
                 "navigationBarTitleText": "镜框选购页"
             }
         },
         {
             "path": "pages/newOpticsData/newOpticsData",
             "style": {
                 "navigationBarTitleText": "验光数据"
             }
         }
    ],
   "subpackages": [
 	 {
 	   "root": "pages/refundment",
 	   "pages": [
 		 "pages/refundment/refundWays",
 		 "pages/refundment/refundment",
 		 "pages/refundProgress/refundProgress"
 	   ]
 	 },
 	 {
 	   "root": "pages/address",
 	   "name": "pack2",
 	   "pages": [
 	 		 "pages/address/addAddress",
 	 		 "pages/address/addressList"
 	   ]
 	 }
    ],
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",
         "navigationBarBackgroundColor": "#F8F8F8",
         "backgroundColor": "#F8F8F8"
     },
     "tabBar": {
         "color": "#C0C4CC",
         "selectedColor": "#fa436a",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
         "list": [
             {
                 "pagePath": "pages/index/index",
                 "iconPath": "static/tab-home.png",
                 "selectedIconPath": "static/tab-home-current.png",
                 "text": "首页"
             },
             {
                 "pagePath": "pages/cart/cart",
                 "iconPath": "static/tab-cart.png",
                 "selectedIconPath": "static/tab-cart-current.png",
                 "text": "购物车"
             },
             {
                 "pagePath": "pages/user/user",
                 "iconPath": "static/tab-my.png",
                 "selectedIconPath": "static/tab-my-current.png",
                 "text": "我的"
             }
         ]
     },
     "condition": {
         "current": 0,
         "list": [
 			// {
 			//     "name": "首页",
 			//     "path": "pages/test/index",
 			//     "query": ""
 			// },
             {
                 "name": "首页",
                 "path": "pages/index/index",
                 "query": ""
             },
             {
                 "name": "产品详情",
-                "path": "pages/frameDetail/frameDetail",
+                "path": "pages/details/details",
                 "query": ""
             },
             {
                 "name": "镜片、美瞳参数选择",
                 "path": "pages/purchaseLenses/purchaseLenses",
                 "query": ""
             },
             {
                 "name": "确认订单",
                 "path": "pages/confirmOrder/confirmOrder",
                 "query": ""
             },
             {
                 "name": "新增地址",
                 "path": "pages/address/addAddress",
                 "query": ""
             },
             {
                 "name": "地址管理",
                 "path": "pages/address/addressList",
                 "query": ""
             },
             {
                 "name": "我的订单",
                 "path": "pages/myOrder/myOrder",
                 "query": ""
             },
             {
                 "name": "待付款订单详情",
                 "path": "pages/myOrderPaying/myOrderPaying",
                 "query": ""
             },
             {
                 "name": "我的",
                 "path": "pages/user/user",
                 "query": ""
             }
         ]
     }
 }

src/pages/details/components/AfterSails.vue

Diff comments View file @280fcb8

File was created	1	<template>
	2	<!-- 售后保障 -->
	3	<view class="customerService">
	4	<view class="serviceItem">
	5	<view class="title">
	6	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
	7	<text class="titleText">卖家服务</text>
	8	</view>
	9	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
	10	</view>
	11	<view class="serviceItem">
	12	<view class="title">
	13	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
	14	<text class="titleText">平台承诺</text>
	15	</view>
	16	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
	17	</view>
	18	<view class="serviceItem">
	19	<view class="title">
	20	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
	21	<text class="titleText">正品保证</text>
	22	</view>
	23	<view class="itemContent">向您保证所售商品均为正品行货</view>
	24	</view>
	25	<view class="serviceItem2">
	26	<view class="title">
	27	<text class="titleText">权利申明</text>
	28	</view>
	29	<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
	30	</view>
	31	<view class="serviceItem2">
	32	<view class="title">
	33	<text class="titleText">价格保证</text>
	34	</view>
	35	<view class="itemContent">
	36	<view class="itemContent-child">
	37	<text class="contentTitle">平台价:</text>
	38	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
	39	</view>
	40	<view class="itemContent-child">
	41	<text class="contentTitle">划线价:</text>
	42	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
	43	</view>
	44	<view class="itemContent-child">
	45	<text class="contentTitle">平折扣:</text>
	46	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
	47	</view>
	48	<view class="itemContent-child">
	49	<text class="contentTitle">异常问题:</text>
	50	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
	51	</view>
	52	</view>
	53	</view>
	54	</view>
	55	</template>
	56
	57	<script>
	58	export default {
	59
	60	}
	61	</script>
	62
	63	<style lang="scss">
	64	.customerService {
	65	margin-bottom: 90rpx;
	66	.serviceItem {
	67	margin-bottom: 32rpx;
	68	.title {
	69	display: flex;
	70	flex-direction: row;
	71	align-items: center;
	72	.titleText {
	73	font-family: PingFangSC-Medium;
	74	font-size: 14px;
	75	color: #333333;
	76	margin-bottom: 12rpx;
	77	}
	78	}
	79	.itemContent {
	80	font-size: 14px;
	81	color: #999999;
	82	margin-left: 18rpx;
	83	}
	84	}
	85	.serviceItem2 {
	86	margin-left: 18rpx;
	87	margin-bottom: 32rpx;
	88	.titleText {
	89	font-size: 14px;
	90	color: #ff6b4a;
	91	}
	92	.itemContent {
	93	font-size: 14px;
	94	color: #999999;
	95	.itemContent-child {
	96	margin-bottom: 40rpx;
	97	.contentTitle {
	98	border-bottom: 1px solid #ff6b4a;
	99	}
	100	}
	101	}
	102	}
	103	}
	104	</style>
	105

src/pages/details/details.vue

Diff comments View file @280fcb8

File was created	1	<template>
	2	<view class="container">
	3	<view class="basic_info">
	4	<!-- 轮播图 -->
	5	<swiper
	6	class="swiperImage"
	7	:indicator-dots="true"
	8	:autoplay="true"
	9	:interval="4000"
	10	:duration="500"
	11	>
	12	<swiper-item
	13	v-for="(item, index) in carousel"
	14	:key="index"
	15	>
	16	<image
	17	:src="item"
	18	mode="scaleToFill"
	19	></image>
	20	</swiper-item>
	21	</swiper>
	22	<!-- 产品价格及购买人数 -->
	23	<view class="info_pay">
	24	<view>￥{{goodsInfo.price \|\| '暂无'}}<span
	25	v-if="goodsInfo.discountPrice"
	26	class="info_pay_discount"
	27	>¥{{goodsInfo.discountPrice}}</span></view>
	28	<span class="info_pay_number">{{goodsInfo.tradeNumber \|\| '暂无'}}人购买过</span>
	29	</view>
	30	<!-- 产品名称 -->
	31	<view class="info_name">
	32	<text class="info_name_name">{{goodsInfo.name \|\| '暂无'}}</text>
	33	<view class="info_name_share">
	34	<image src="/static/img/detail/share-icon.png"></image>
	35	<text>分享</text>
	36	</view>
	37	</view>
	38	<!-- 产品售后信息 -->
	39	<view class="info_after">
	40	<span>支持7天无理由退货</span>
	41	<span>顺丰发货</span>
	42	<span>30天质量保证</span>
	43	</view>
	44	</view>
	45	<view class="detail_info">
	46	<!-- 详细信息菜单 -->
	47	<view class="screen_bar">
	48	<view
	49	v-for="item in screenItems"
	50	:key="item.current"
	51	@click="tabChange(item.current)"
	52	>
	53	<view
	54	class="screen_item"
	55	v-bind:class="{ item_active: item_current === item.current }"
	56	>{{ item.text \|\| '暂无' }}</view>
	57	</view>
	58	</view>
	59	<!-- 售后保障 -->
	60	<view
	61	class="screen_item"
	62	v-if="item_current === 2"
	63	>
	64	<AfterSails />
	65	</view>
	66	</view>
	67	</view>
	68	</template>
	69
	70	<script>
	71	import store from '@/store'
	72	import AfterSails from './components/AfterSails'
	73	// import BottomSheet from '@/components/BottomSheet.vue'
	74
	75	export default {
	76	components: {
	77	AfterSails,
	78	},
	79	data () {
	80	return {
	81	pid: 7, // 产品ID
	82	skId: undefined, // skuId
	83	// 详细信息菜单
	84	item_current: 0,
	85	screenItems: [
	86	{ current: 0, text: '商品介绍' },
	87	{ current: 1, text: '规格参数' },
	88	{ current: 2, text: '售后保障' },
	89	],
	90	}
	91	},
	92	onLoad({ pid = this.pid, sk_id: skId }) {
	93	this.pid = pid
	94	this.skId = skId
	95
	96	// 获取产品详情
	97	this.getDetails({ pid, skId })
	98	},
	99	computed: {
	100	// 获取轮播图数据
	101	carousel() {
	102	return this.$store.state.details.carousel
	103	},
	104	// 商品基本信息
	105	goodsInfo() {
	106	return this.$store.state.details.goodsInfo
	107	},
	108	},
	109	methods: {
	110	// 获取产品详情
	111	getDetails({ pid, skId }) {
	112	store.dispatch('details/details', {
	113	pid,
	114	sk_id: skId,
	115	})
	116	},
	117	// 切换详细信息菜单
	118	tabChange (e) {
	119	if (this.current !== e) {
	120	this.item_current = e
	121	}
	122	},
	123	},
	124	}
	125	</script>
	126
	127	<style lang="scss">
	128	.container {
	129	background-color: #f8f8f8;
	130	font-family: "PingFangSC-Regular";
	131	// 板块样式
	132	> view {
	133	background: #ffffff;
	134	margin-bottom: 10px;
	135	padding: 8px 20px 8px 20px;
	136	box-sizing: border-box;
	137	}
	138	// 基础信息板块
	139	.basic_info {
	140	// 轮播图
	141	.swiperImage {
	142	width: 684rpx;
	143	height: 480rpx;
	144	image {
	145	max-width: 100%;
	146	max-height: 100%;
	147	border-radius: 16rpx;
	148	}
	149	}
	150	// 产品价格及购买人数
	151	.info_pay {
	152	color: #eb5d3b;
	153	font-size: 18px;
	154	margin-top: 5px;
	155	font-family: "PingFangSC-Semibold";
	156	display: flex;
	157	justify-content: space-between;
	158	.info_pay_discount {
	159	text-decoration: line-through;
	160	margin-left: 8rpx;
	161	color: #999;
	162	font-size: 14px;
	163	}
	164	.info_pay_number {
	165	color: #999;
	166	font-size: 14px;
	167	}
	168	}
	169	// 产品名称
	170	.info_name {
	171	margin-top: 5px;
	172	display: flex;
	173	justify-content: space-between;
	174	.info_name_name {
	175	margin-right: 10px;
	176	font-size: 16px;
	177	font-family: "PingFangSC-Semibold";
	178	max-width: 592rpx;
	179	}
	180	.info_name_share {
	181	display: flex;
	182	flex-direction: column;
	183	justify-content: space-between;
	184	align-items: center;
	185	margin-top: 14rpx;
	186	> image {
	187	height: 40rpx;
	188	width: 40rpx;
	189	}
	190	> text {
	191	font-family: PingFangSC-Regular;
	192	font-size: 12px;
	193	color: #999;
	194	letter-spacing: -0.23px;
	195	}
	196	}
	197	}
	198	// 售后服务
	199	.info_after {
	200	font-size: 10px;
	201	color: #999;
	202	margin-top: 20rpx;
	203	> span {
	204	height: 14px;
	205	margin-right: 10px;
	206	}
	207	}
	208	}
	209	// 详细信息
	210	.detail_info {
	211	.screen_bar {
	212	width: 670rpx;
	213	margin-top: 20rpx;
	214	margin-bottom: 24rpx;
	215	display: flex;
	216	flex-direction: row;
	217	justify-content: space-between;
	218	align-items: center;
	219	font-size: 14px;
	220	color: #333333;
	221	transition: all 0.2s;
	222	}
	223	.item_active {
	224	border-bottom: 4rpx solid #ff6b4a;
	225	}
	226	.screen_item {
	227	font-size: 32rpx;
	228	color: #333333;
	229	display: flex;
	230	transition: all 0.2s;
	231	}
	232	}
	233	}
	234	</style>
	235

src/pages/frameDetail/components/BottomSheet.vue

Diff comments View file @280fcb8

File was created	1	<template>
	2	<view class="content">
	3	<view
	4	class="sheet"
	5	:class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"
	6	@touchmove.stop.prevent="moveHandle"
	7	@click="closeSheet()"
	8	>
	9	<scroll-view
	10	scroll-y="true"
	11	class="sheetView"
	12	:class="{sheetView_active:isShowBottom}"
	13	@click.stop="stopEvent()"
	14	>
	15	<view class="content">
	16	<view class="goodInfo">
	17	<view class="imageWrap">
	18	<image
	19	:src="goodInfo.img_index_url"
	20	mode="aspectFill"
	21	style="width: 188rpx;height: 168rpx;"
	22	></image>
	23	</view>∂
	24	<view class="infoRight">
	25	<text class="goodName">{{goodInfo.p_name}}</text>
	26	<text class="remarks">支持7天无理由退货顺丰发货</text>
	27	<view class="priceBox">
	28	<view class="price">￥{{goodInfo.priceArea.Min_Price \|\| '暂无'}}</view>
	29	<text>(限购{{maxCount}}副)</text>
	30	<view class="counter">
	31	<view
	32	class="btn"
	33	disabled="this.addDisabled"
	34	type="default"
	35	@click="counter(false)"
	36	>-</view>
	37	<text>{{count}}</text>
	38	<view
	39	class="btn"
	40	disabled="this.desDisabled"
	41	type="default"
	42	@click="counter(true)"
	43	>+</view>
	44	</view>
	45	</view>
	46	</view>
	47	</view>
	48	<view class="peopleChoose">
	49	<view class="title">选择使用人</view>
	50	<view class="loveList">
	51	<view
	52	class="peopleName"
	53	v-for="(item,index) in loveList"
	54	:key='index'
	55	:class="{ active2: loveCurrent === index }"
	56	@click="onClickLoveItem(index,item.name)"
	57	>
	58	{{item.name}}
	59	</view>
	60	</view>
	61	</view>
	62	<view class="goods-data">
	63	<view class="opCollapse">
	64	<view class="body">
	65	<template v-if="opIsOpen">
	66	<view class="goods-form">
	67	<view class="p1">
	68	<image
	69	class="image2"
	70	src="../../../static/img/myOpticsData/dataWrite.png"
	71	mode="aspectFit"
	72	></image>
	73	填写验光数据
	74	</view>
	75	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
	76	<view class="picker">
	77	<view class="picker-choice">
	78	<view class="choice-left">
	79	<text class="pd">验光单取名:</text>
	80	</view>
	81	<input
	82	type="text"
	83	@blur="handleInput"
	84	class="input"
	85	placeholder="请输入名称"
	86	maxlength="20"
	87	:value="name"
	88	/>
	89	</view>
	90	</view>
	91	<view class="picker">
	92	<view class="picker-choice">
	93	<view class="choice-left">
	94	<text class="p11">{{pickerInfoList[0].nameC}}</text>
	95	<text class="p12">{{pickerInfoList[0].nameE}}</text>
	96	</view>
	97	<text class="p13">左   (OD)</text>
	98	<!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
	99	<picker
	100	@change="bindPickerChange01"
	101	:value="pickerInfoList[0].nameIndex1"
	102	:range="pickerInfoList[0].nameArray1"
	103	>
	104	<view class="p14">
	105	{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
	106	<image src="../../../static/detail-tabicon.png"></image>
	107	</view>
	108	<!-- <image src="../../../static/detail-tabicon.png" ></image> -->
	109	</picker>
	110	<text class="p13">右   (OS)</text>
	111	<!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
	112	<picker
	113	@change="bindPickerChange02"
	114	:value="pickerInfoList[0].nameIndex2"
	115	:range="pickerInfoList[0].nameArray2"
	116	>
	117	<view class="p14">
	118	{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
	119	<image src="../../../static/detail-tabicon.png"></image>
	120	</view>
	121	<!-- <image src="../../../static/detail-tabicon.png" ></image> -->
	122	</picker>
	123	</view>
	124	</view>
	125	<view class="picker">
	126	<view class="picker-choice">
	127	<view class="choice-left">
	128	<text class="p11">{{pickerInfoList[1].nameC}}</text>
	129	<text class="p12">{{pickerInfoList[1].nameE}}</text>
	130	</view>
	131	<text class="p13">左   (OD)</text>
	132	<!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
	133	<picker
	134	@change="bindPickerChange11"
	135	:value="pickerInfoList[1].nameIndex1"
	136	:range="pickerInfoList[1].nameArray1"
	137	>
	138	<view class="p14">
	139	{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
	140	<image src="../../../static/detail-tabicon.png"></image>
	141	</view>
	142	<!-- <image src="../../../static/detail-tabicon.png" ></image> -->
	143	</picker>
	144	<text class="p13">右   (OS)</text>
	145	<!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
	146	<picker
	147	@change="bindPickerChange12"
	148	:value="pickerInfoList[1].nameIndex2"
	149	:range="pickerInfoList[1].nameArray2"
	150	>
	151	<view class="p14">
	152	{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
	153	<image src="../../../static/detail-tabicon.png"></image>
	154	</view>
	155	<!-- <image src="../../../static/detail-tabicon.png" ></image> -->
	156	</picker>
	157	</view>
	158	</view>
	159	<view class="picker">
	160	<view class="picker-choice">
	161	<view class="choice-left">
	162	<text class="p11">{{pickerInfoList[2].nameC}}</text>
	163	<text class="p12">{{pickerInfoList[2].nameE}}</text>
	164	</view>
	165	<text class="p13">左   (OD)</text>
	166	<picker
	167	@change="bindPickerChange21"
	168	:value="pickerInfoList[2].nameIndex1"
	169	:range="pickerInfoList[2].nameArray1"
	170	>
	171	<view class="p14">
	172	{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
	173	<image src="../../../static/detail-tabicon.png"></image>
	174	</view>
	175	</picker>
	176	<text class="p13">右   (OS)</text>
	177	<!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
	178	<picker
	179	@change="bindPickerChange22"
	180	:value="pickerInfoList[2].nameIndex2"
	181	:range="pickerInfoList[2].nameArray2"
	182	>
	183	<view class="p14">
	184	{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
	185	<image src="../../../static/detail-tabicon.png"></image>
	186	</view>
	187	<!-- <image src="../../../static/detail-tabicon.png" ></image> -->
	188	</picker>
	189	</view>
	190	</view>
	191	<view class="picker">
	192	<view class="picker-choice">
	193	<view class="choice-left">
	194	<text class="pd">瞳距:</text>
	195	</view>
	196	<input
	197	type="digit"
	198	@change="handleInputPd"
	199	class="input"
	200	placeholder="请输入瞳距,单位cm"
	201	maxlength="20"
	202	:value="pd"
	203	/>
	204	</view>
	205	</view>
	206	<view class="picker">
	207	<view class="picker-choice">
	208	<view class="choice-left">
	209	<text class="p11">{{pickerInfoList[3].nameC}}</text>
	210	</view>
	211	<text class="p13-date">年   (Y)</text>
	212	<picker
	213	@change="bindPickerChange41"
	214	:value="pickerInfoList[3].nameIndex1"
	215	:range="pickerInfoList[3].nameArray1"
	216	>
	217	<view
	218	class="p14"
	219	style="width: 30px;"
	220	>
	221	{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
	222	<image src="../../../static/detail-tabicon.png"></image>
	223	</view>
	224	</picker>
	225	<text class="p13-date">月   (M)</text>
	226	<picker
	227	@change="bindPickerChange42"
	228	:value="pickerInfoList[3].nameIndex2"
	229	:range="pickerInfoList[3].nameArray2"
	230	>
	231	<view
	232	class="p14"
	233	style="width: 30px;"
	234	>
	235	{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
	236	<image src="../../../static/detail-tabicon.png"></image>
	237	</view>
	238	</picker>
	239	<text class="p13-date">日   (D)</text>
	240	<picker
	241	@change="bindPickerChange43"
	242	:value="pickerInfoList[3].nameIndex3"
	243	:range="pickerInfoList[3].nameArray3"
	244	>
	245	<view
	246	class="p14"
	247	style="width: 30px;"
	248	>
	249	{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
	250	<image src="../../../static/detail-tabicon.png"></image>
	251	</view>
	252	</picker>
	253	</view>
	254	</view>
	255	<view class="confirm">
	256	<image
	257	class="image1"
	258	:src="confirm ? tabicon[0] : tabicon[1]"
	259	@tap="changeConfirm"
	260	></image>
	261	<text>确认以上输入信息来源于我的验光数据!</text>
	262	</view>
	263	</view>
	264	</template>
	265	<template v-else>
	266	<view
	267	v-for="item in pickerInfoList"
	268	:key="item.key"
	269	class="bodyBox"
	270	>
	271	<template v-if="item.nameC==='验光日期'">
	272	<text class="names">{{item.nameC}}</text>
	273	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
	274	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
	275	<text>{{item.nameArray3[item.nameIndex2]}}日</text>
	276	</template>
	277	<template v-else>
	278	<template v-if="item.nameC==='度数'">
	279	<text style="display: inline;">*</text>
	280	</template>
	281
	282	<text class="names">{{item.nameC}}</text>
	283	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
	284	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>
	285	</template>
	286	</view>
	287	</template>
	288	</view>
	289	</view>
	290	</view>
	291	<view class="choose">
	292	<view
	293	class="chooseItem_1_content"
	294	v-for="(item,index) in attrList"
	295	:key="index"
	296	>
	297	<UniCollapse @change="changeShow(index)">
	298	<UniCollapseItem
	299	:open="show[index]"
	300	:title="item.meta_name"
	301	showAnimation=false
	302	>
	303	<view class="chooseItem_1_content">
	304	<view class="itemsWrap">
	305	<view
	306	class="item2"
	307	v-for="(one,i) in item.attr"
	308	:key="i"
	309	:class="{ active2: current[index] === i }"
	310	@click="onClickItem(index, i)"
	311	>{{one.name}}</view>
	312	</view>
	313	</view>
	314	</UniCollapseItem>
	315	</UniCollapse>
	316	<view
	317	class="chooseRes"
	318	v-show="!show[index]"
	319	>* {{attrList[index].attr[current[index]].name}}</view>
	320	</view>
	321	</view>
	322	<view
	323	class="button"
	324	@click.native="addCart"
	325	v-if="isCart"
	326	>
	327	加入购物车
	328	</view>
	329	<view
	330	class="button"
	331	@click="toComfirmOrder"
	332	v-else
	333	>
	334	立即结算
	335	</view>
	336	</view>
	337	</scroll-view>
	338	</view>
	339	</view>
	340	</template>
	341	<script>
	342	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
	343	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
	344	import store from '@/store'
	345	export default {
	346	components: {
	347	UniCollapse,
	348	UniCollapseItem,
	349	},
	350	props: {
	351	isShowBottom: Boolean,
	352	pid: Number,
	353	goodInfo: Object,
	354	isCart: Boolean,
	355	},
	356	data() {
	357	return {
	358	loveCurrent: Number,
	359	count: 1,
	360	// pid: 0,
	361	maxCount: 20,
	362	dataName: '', // 验光数据人员名称
	363	isDataName: false, // 是否是已存在的人员数据
	364	dataConfirm: false, // 已确认所输入验光数据
	365	opIsOpen: true,
	366	addDisabled: false,
	367	desDisabled: false,
	368	current: [],
	369	show: [],
	370	checkedData: {},
	371	// 度数相关数据
	372	pickerInfoList: [
	373	{ nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
	374	{ nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
	375	{ nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
	376	{ nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
	377	],
	378	confirm: false, // 用户是否确认
	379	tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
	380	name: '',
	381	oldname: '', // 用于判读用户是否改变名字
	382	pickerInfoChioce: {
	383	leftSph: '',
	384	rightSph: '',
	385	leftCyl: '',
	386	rightCyl: '',
	387	leftAxi: '',
	388	rightAxi: '',
	389	time: {
	390	year: 0,
	391	month: 0,
	392	day: 0,
	393	},
	394	},
	395	pd: '', // 瞳距
	396	oldpd: '', // 用于判断用户是否改变瞳距
	397	kinds: 1, // kinds=1，提交为新增验光，2为修改
	398	mp_id: Number,
	399	}
	400	},
	401	computed: {
	402	loveList() {
	403	// console.log('**********loveList',this.$store.state.myLoveList.loveList)
	404	return this.$store.state.myLoveList.loveList \|\| []
	405	},
	406	attrList() {
	407	const attrList = this.$store.state.read.goodInfo.attrList
	408	if (attrList !== undefined) {
	409	return attrList
	410	} else {
	411	return []
	412	}
	413	},
	414	skuList() {
	415	return this.$store.state.read.goodInfo.skuList
	416	},
	417	mpList() {
	418	return this.$store.state.myLoveList.loveList
	419	},
	420	},
	421	created() {
	422	const pid = this.pid
	423	console.log('this.goodInfo', this.goodInfo)
	424	const current = []
	425	const show = []
	426	for (let index = 0; index < this.attrList.length; index++) {
	427	current.push(0)
	428	show.push(true)
	429	}
	430	this.current = current
	431	this.show = show
	432
	433	// 获取关心的人列表
	434	store.dispatch('myLoveList/getLoveList', {
	435	uid: this.$store.state.user.userInfo.uid,
	436	})
	437	// 初始化SPL、CYL、AXI的值
	438	for (let j = 0; j < 3; j++) {
	439	for (let i = -12; i < 6; i++) {
	440	this.pickerInfoList[j].nameArray1.push(i)
	441	this.pickerInfoList[j].nameArray1.push(i + 0.5)
	442	this.pickerInfoList[j].nameArray2.push(i)
	443	this.pickerInfoList[j].nameArray2.push(i + 0.5)
	444	if (i >= -6) {
	445	this.pickerInfoList[j].nameArray1.push(i + 0.25)
	446	this.pickerInfoList[j].nameArray1.push(i + 0.75)
	447	this.pickerInfoList[j].nameArray2.push(i + 0.25)
	448	this.pickerInfoList[j].nameArray2.push(i + 0.75)
	449	}
	450	if (i === 5) {
	451	this.pickerInfoList[j].nameArray1.push(i + 1)
	452	this.pickerInfoList[j].nameArray2.push(i + 1)
	453	}
	454	}
	455	}
	456	// 初始化日期值
	457	for (let i = 1; i < 32; i++) {
	458	this.pickerInfoList[3].nameArray3.push(i)
	459	}
	460	// 初始化年份前后五年
	461	const myDate = new Date()
	462	const nowYear = myDate.getFullYear()
	463	for (let i = 0; i < 5; i++) {
	464	this.pickerInfoList[3].nameArray1.push(nowYear - i)
	465	}
	466	},
	467	name: 'bottomSheet',
	468	methods: {
	469	addCart() {
	470	const that = this
	471	const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name]
	472	const checkedSKU = []
	473	let j
	474	for (let i = 0; i < that.current.length; i++) {
	475	checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
	476	// console.log('i', i, j, i !== this.current.length - 1)
	477	if (i !== this.current.length - 1) {
	478	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
	479	j = this.current[i] * this.attrList[1].attr.length
	480	} else {
	481	j += this.current[i]
	482	}
	483	}
	484	const sk_id = this.skuList[j].sk_id
	485	console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU)
	486	this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车
	487	this.$emit('closeBottom')// 关闭弹窗
	488	},
	489	onClickLoveItem(index, name) {
	490	const loveList = this.loveList
	491	for (let index = 0; index < loveList.length; index++) {
	492	if (name === loveList[index].name && name !== this.name) {
	493	this.isDataName = true
	494	this.kinds = 2
	495	this.name = loveList[index].name
	496	this.pd = loveList[index].pd
	497	this.mp_id = loveList[index].mp_id
	498	this.oldname = loveList[index].name
	499	this.oldpd = loveList[index].pd
	500	this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
	501	this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
	502	this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
	503	this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
	504	this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
	505	this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
	506	this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
	507	if (loveList[index].in_time.toString().slice(5, 6) === 0) {
	508	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
	509	} else {
	510	this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
	511	}
	512	if (loveList[index].in_time.toString().slice(8, 9) === 0) {
	513	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
	514	} else {
	515	this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
	516	}
	517	}
	518	}
	519	this.name = name
	520	this.loveCurrent = index
	521	},
	522	closeSheet() {
	523	this.$emit('closeBottom')
	524	},
	525	// @click.stop防止事件冒泡
	526	stopEvent() {},
	527	// 不让页面滚动
	528	moveHandle() {},
	529	// picker相关功能
	530	handleInput(e) {
	531	this.name = e.target.value
	532	this.isDataName = false
	533	console.log('e---->', e)
	534	const mpList = this.mpList
	535	// console.log('mpList===>', mpList)
	536	for (let index = 0; index < mpList.length; index++) {
	537	if (e.detail.value === mpList[index].name) {
	538	this.isDataName = true
	539	uni.showModal({
	540	title: '提示',
	541	content: `是否填充已有的"${e.detail.value}"的数据`,
	542	success: (res) => {
	543	if (res.confirm) {
	544	this.kinds = 2
	545	console.log('args===>', index)
	546	// const mpList=Object.assign({},this.$store.state.mympList.mpList)
	547	console.log('mpList===>', mpList)
	548	this.name = mpList[index].name
	549	this.pd = mpList[index].pd
	550	this.mp_id = mpList[index].mp_id
	551	this.oldname = mpList[index].name
	552	this.oldpd = mpList[index].pd
	553	// 将kinds =2时的值传到该页面
	554	this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
	555	this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
	556	this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
	557	this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
	558	this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
	559	this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
	560	this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
	561	if (mpList[index].in_time.toString().slice(5, 6) === 0) {
	562	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
	563	} else {
	564	this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
	565	}
	566	if (mpList[index].in_time.toString().slice(8, 9) === 0) {
	567	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
	568	} else {
	569	this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
	570	}
	571	// this.checkedData = mpList[index]
	572	// console.log('checkedData', this.checkedData)
	573	} else if (res.cancel) {
	574	this.kinds = 2
	575	}
	576	},
	577	})
	578	}
	579	}
	580	},
	581	handleInputPd(e) {
	582	// 只能输入正浮点数或正数
	583	if (/^\d+(\.\d+)?$/.test(e.target.value)) {
	584	this.pd = e.target.value
	585	} else {
	586	uni.showToast({
	587	title: '请输入有效数据;示例:89',
	588	icon: 'none',
	589	duration: 2000,
	590	})
	591	this.pd = ''
	592	}
	593	},
	594	changeConfirm() {
	595	this.confirm = !this.confirm
	596	},
	597	bindPickerChange01: function(e) {
	598	this.pickerInfoList[0].nameIndex1 = e.target.value
	599	this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
	600	},
	601	bindPickerChange02: function(e) {
	602	this.pickerInfoList[0].nameIndex2 = e.target.value
	603	this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
	604	},
	605	bindPickerChange11: function(e) {
	606	this.pickerInfoList[1].nameIndex1 = e.target.value
	607	this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
	608	},
	609	bindPickerChange12: function(e) {
	610	this.pickerInfoList[1].nameIndex2 = e.target.value
	611	this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
	612	},
	613	bindPickerChange21: function(e) {
	614	this.pickerInfoList[2].nameIndex1 = e.target.value
	615	this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
	616	},
	617	bindPickerChange22: function(e) {
	618	this.pickerInfoList[2].nameIndex2 = e.target.value
	619	this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
	620	},
	621	bindPickerChange41: function(e) {
	622	this.pickerInfoList[3].nameIndex1 = e.target.value
	623	this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
	624	},
	625	bindPickerChange42: function(e) {
	626	this.pickerInfoList[3].nameIndex2 = e.target.value
	627	this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
	628	},
	629	bindPickerChange43: function(e) {
	630	this.pickerInfoList[3].nameIndex3 = e.target.value
	631	this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
	632	},
	633	changeShow(num) {
	634	this.show[num] = !this.show[num]
	635	this.$forceUpdate()
	636	},
	637	onClickItem(index, i) {
	638	if (this.current[index] !== i) {
	639	this.current[index] = i
	640	}
	641	this.$forceUpdate()
	642	},
	643	counter(isadd) {
	644	if (isadd) {
	645	this.count >= this.maxCount ? this.addDisabled = true : this.count++
	646	} else {
	647	this.count <= 1 ? this.desDisabled = true : this.count--
	648	}
	649	},
	650	toComfirmOrder() {
	651	// 先处理验光部分的逻辑，如果ok在跳转
	652	let flag = 0
	653	if (this.name === '') {
	654	uni.showToast({
	655	title: '请输入验光单取名',
	656	icon: 'none',
	657	duration: 2000,
	658	})
	659	} else {
	660	if (this.pd === '') {
	661	uni.showToast({
	662	title: '请输入瞳距',
	663	icon: 'none',
	664	duration: 2000,
	665	})
	666	} else {
	667	if (this.kinds === 1) {
	668	// 添加用户验光单
	669	console.log('kinds====>', this.pickerInfoChioce.leftSph)
	670	console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
	671	console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
	672	if (this.pickerInfoChioce.rightSph === '' \|\| this.pickerInfoChioce.leftSph === '' \|\|
	673	this.pickerInfoChioce.leftCyl === '' \|\| this.pickerInfoChioce.rightCyl === '' \|\|
	674	this.pickerInfoChioce.leftAxi === '' \|\| this.pickerInfoChioce.rightAxi === ''
	675	) {
	676	uni.showToast({
	677	title: '请输入您的验光数据',
	678	icon: 'none',
	679	duration: 2000,
	680	})
	681	} else {
	682	if (this.confirm) {
	683	store.dispatch('myLoveList/addMylove', {
	684	uid: this.$store.state.user.userInfo.uid,
	685	openid: this.$store.state.user.userInfo.openid,
	686	// mp_name: this.$store.state.user.userInfo.mp_name,
	687	leftSph: this.pickerInfoChioce.leftSph,
	688	rightSph: this.pickerInfoChioce.rightSph,
	689	leftCyl: this.pickerInfoChioce.leftCyl,
	690	rightCyl: this.pickerInfoChioce.rightCyl,
	691	leftAxi: this.pickerInfoChioce.leftAxi,
	692	rightAxi: this.pickerInfoChioce.rightAxi,
	693	pd: this.pd, // 瞳距
	694	mp_name: this.name,
	695	// time: this.pickerInfoChioce.time,
	696	// img_url2: "http://localhost:8087/images/shop_1/1/",
	697	}).then(({ mp_id: mpId }) => {
	698	this.mp_id = mpId
	699	})
	700	flag = 1
	701	} else {
	702	uni.showToast({
	703	title: '请确认您的验光数据',
	704	icon: 'none',
	705	duration: 3000,
	706	})
	707	}
	708	}
	709	}
	710	if (this.kinds === 2) {
	711	if (this.confirm) {
	712	const leftList = ['leftSph', 'leftCyl', 'leftAxi']
	713	const rightList = ['rightSph', 'rightCyl', 'rightAxi']
	714	// let flag=0;
	715	if (this.name !== this.oldname) {
	716	store.dispatch('myLoveList/updateMylove', {
	717	uid: this.$store.state.user.userInfo.uid,
	718	openid: this.$store.state.user.userInfo.openid,
	719	mp_id: this.mp_id,
	720	keyname: 'name',
	721	keyvalue: this.name,
	722	})
	723	flag = 1
	724	}
	725	if (this.pd !== this.oldpd) {
	726	store.dispatch('myLoveList/updateMylove', {
	727	uid: this.$store.state.user.userInfo.uid,
	728	openid: this.$store.state.user.userInfo.openid,
	729	mp_id: this.mp_id,
	730	keyname: 'pd',
	731	keyvalue: this.pd,
	732	})
	733	flag = 1
	734	}
	735	// 先验证是否输入有无空
	736	let q = true
	737	for (let k = 0; k < 3; k++) {
	738	q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
	739	this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
	740	}
	741	if (q) {
	742	for (let j = 0; j < 3; j++) {
	743	if (this.pickerInfoList[j].nameIndex1 !== 0) {
	744	store.dispatch('myLoveList/updateMylove', {
	745	uid: this.$store.state.user.userInfo.uid,
	746	openid: this.$store.state.user.userInfo.openid,
	747	mp_id: this.mp_id,
	748	keyname: leftList[j],
	749	keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
	750	})
	751	}
	752	if (this.pickerInfoList[j].nameIndex2 !== 0) {
	753	store.dispatch('myLoveList/updateMylove', {
	754	uid: this.$store.state.user.userInfo.uid,
	755	openid: this.$store.state.user.userInfo.openid,
	756	mp_id: this.mp_id,
	757	keyname: rightList[j],
	758	keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
	759	})
	760	}
	761	flag = 1
	762	}
	763	} else {
	764	flag = 0
	765	uni.showToast({
	766	title: '请输入您的验光数据',
	767	icon: 'none',
	768	duration: 2000,
	769	})
	770	}
	771	if (flag !== 0) {
	772	store.dispatch('myLoveList/getLoveList', {
	773	uid: this.$store.state.user.userInfo.uid,
	774	})
	775	}
	776	} else {
	777	uni.showToast({
	778	title: '请确认您的验光数据',
	779	icon: 'none',
	780	duration: 3000,
	781	})
	782	}
	783	}
	784	}
	785	}
	786	if (flag !== 0) {
	787	// 如果数据验证无误，那么更新验光单的数据
	788	store.dispatch('myLoveList/getLoveList', {
	789	uid: this.$store.state.user.userInfo.uid,
	790	})
	791	let i = 0
	792	// 判断出是哪一个sku被选中
	793	for (let index = 0; index < this.current.length; index++) {
	794	console.log('index', index, i, index !== this.current.length - 1)
	795	if (index !== this.current.length - 1) {
	796	// 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
	797	i = this.current[index] * this.attrList[1].attr.length
	798	} else {
	799	i += this.current[index]
	800	}
	801	}
	802	// 判断是否其输入的人员数据是否已存在
	803	store.dispatch('order/saveParams', {
	804	sk_id_arr: this.skuList[i],
	805	current: this.current,
	806	mp_id: this.mp_id,
	807	attrList: this.attrList,
	808	})
	809	// 跳转到确认订单页面
	810	uni.navigateTo({
	811	url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
	812	})
	813	}
	814	},
	815	},
	816	}
	817	</script>
	818
	819	<style lang="scss">
	820	.content {
	821	min-height: 100vh;
	822	background-color: #f2f2f2;
	823	// padding-top: 20rpx;
	824	.goodInfo {
	825	width: 100%;
	826	height: 272rpx;
	827	border-radius: 16rpx;
	828	background-color: #ffffff;
	829	box-sizing: border-box;
	830	padding: 36rpx;
	831	display: flex;
	832	flex-direction: row;
	833	justify-content: flex-start;
	834	.imageWrap {
	835	height: 188rpx;
	836	width: 188rpx;
	837	margin-right: 28rpx;
	838	image {
	839	height: 188rpx;
	840	width: 188rpx;
	841	}
	842	}
	843	.infoRight {
	844	display: flex;
	845	flex-direction: column;
	846	align-items: flex-start;
	847	justify-content: space-between;
	848	.goodName {
	849	font-size: 28rpx;
	850	color: #333333;
	851	}
	852	.remarks {
	853	font-size: 20rpx;
	854	color: #999999;
	855	}
	856	.priceBox {
	857	display: flex;
	858	justify-content: space-between;
	859	align-items: center;
	860	width: 100%;
	861	font-size: 14px;
	862	color: #999999;
	863	.price {
	864	color: #ff6b4a;
	865	font-size: 28rpx;
	866	}
	867	.counter {
	868	display: flex;
	869	flex-direction: row;
	870	justify-content: space-between;
	871	align-items: center;
	872	font-size: 28rpx;
	873	color: #333333;
	874	width: 122rpx;
	875	.btn {
	876	display: flex;
	877	justify-content: center;
	878	line-height: 32rpx;
	879	height: 32rpx;
	880	width: 32rpx;
	881	background-color: #f2f2f2;
	882	color: #cfcfcf;
	883	}
	884	}
	885	}
	886	}
	887	}
	888	.peopleChoose {
	889	width: 100%;
	890	min-height: 200rpx;
	891	border-radius: 16rpx;
	892	background-color: #ffffff;
	893	box-sizing: border-box;
	894	padding: 36rpx;
	895	margin: 10px 0;
	896	display: flex;
	897	flex-direction: column;
	898	justify-content: flex-start;
	899	align-items: center;
	900	.title {
	901	font-size: 16px;
	902	color: #333333;
	903	letter-spacing: -0.3px;
	904	text-align: justify;
	905	line-height: 24px;
	906	margin: 4px 0;
	907	}
	908	.loveList {
	909	display: flex;
	910	flex-direction: row;
	911	flex-wrap: wrap;
	912	justify-content: flex-start;
	913	align-items: center;
	914	padding-top: 24rpx;
	915	width: 100%;
	916	.peopleName {
	917	padding: 0 30rpx;
	918	height: 60rpx;
	919	margin: 0 20rpx 20rpx 0;
	920	transition: all 0.3s;
	921	background: #f2f2f2;
	922	border-radius: 2px;
	923	border-radius: 2px;
	924	line-height: 60rpx;
	925	text-align: center;
	926	color: #666666;
	927	font-size: 12px;
	928	}
	929	.active2 {
	930	background: rgba(255, 107, 74, 0.15);
	931	color: #ff6b4a;
	932	}
	933	}
	934	}
	935	.goods-data {
	936	width: 100%;
	937	box-sizing: border-box;
	938	padding: 37rpx 40rpx 0 40rpx;
	939	background: #ffffff;
	940	border-radius: 12rpx;
	941	.opCollapse {
	942	width: 100%;
	943	padding-bottom: 28rpx;
	944	margin-top: 7px;
	945	border-bottom: 1px solid #e9e9e9;
	946	.head {
	947	display: flex;
	948	justify-content: space-between;
	949	height: 24px;
	950	// font-family: PingFangSC-Medium;
	951	font-size: 16px;
	952	color: #333333;
	953	letter-spacing: -0.3px;
	954	text-align: justify;
	955	line-height: 24px;
	956	margin-bottom: 18rpx;
	957	.headRighted {
	958	width: 0;
	959	height: 0;
	960	border-left: 4px solid transparent;
	961	border-right: 4px solid transparent;
	962	border-bottom: 4px solid #cfcfcf;
	963	transform: scaleY(-1);
	964	margin-top: 10px;
	965	}
	966	.headMid {
	967	font-size: 10px;
	968	color: #999999;
	969	letter-spacing: -0.19px;
	970	margin-left: -120rpx;
	971	}
	972	.headRight {
	973	width: 0;
	974	height: 0;
	975	border-left: 4px solid transparent;
	976	border-right: 4px solid transparent;
	977	border-bottom: 4px solid #cfcfcf;
	978	margin-top: 10px;
	979	}
	980	}
	981	.body {
	982	font-size: 12px;
	983	color: #666666;
	984	letter-spacing: 0;
	985	.bodyBox {
	986	margin-top: 15px;
	987	.names {
	988	font-size: 12px;
	989	color: #151515;
	990	letter-spacing: 0;
	991	text-align: justify;
	992	line-height: 17px;
	993	margin-left: 5px;
	994	margin-right: 10px;
	995	}
	996	text {
	997	font-size: 12px;
	998	color: #666666;
	999	letter-spacing: 0;
	1000	text-align: justify;
	1001	}
	1002	}
	1003	}
	1004	.goods-form {
	1005	display: flex;
	1006	flex-direction: column;
	1007	align-items: center;
	1008	justify-content: center;
	1009	background-color: #fff;
	1010	width: 100%;
	1011	padding: 40rpx 0;
	1012	.p1 {
	1013	font-size: 16px;
	1014	color: #333333;
	1015	letter-spacing: -0.3px;
	1016	text-align: justify;
	1017	line-height: 24px;
	1018	margin: 4px 0;
	1019	}
	1020	.p2 {
	1021	font-size: 12px;
	1022	color: #999999;
	1023	letter-spacing: -0.23px;
	1024	margin-bottom: 32rpx;
	1025	}
	1026	.image2 {
	1027	width: 42rpx;
	1028	height: 34rpx;
	1029	margin-right: 12rpx;
	1030	}
	1031	.confirm {
	1032	display: flex;
	1033	align-items: center;
	1034	font-size: 12px;
	1035	color: #666666;
	1036	letter-spacing: -0.23px;
	1037	width: 684rpx;
	1038	.image1 {
	1039	margin-right: 25rpx;
	1040	width: 42rpx;
	1041	height: 38rpx;
	1042	}
	1043	}
	1044	.picker {
	1045	display: flex;
	1046	flex-direction: column;
	1047	justify-content: center;
	1048	align-items: center;
	1049	width: 100%;
	1050
	1051	.picker-choice {
	1052	display: flex;
	1053	width: 684rpx;
	1054	align-items: center;
	1055	margin-bottom: 40rpx;
	1056	.input {
	1057	border-bottom: 1px solid #cfcfcf;
	1058	height: 40rpx;
	1059	}
	1060	.choice-left {
	1061	width: 210rpx;
	1062	.pd {
	1063	font-size: 14px;
	1064	color: #333333;
	1065	letter-spacing: -0.26px;
	1066	text-align: justify;
	1067	line-height: 24px;
	1068	margin-right: 44rpx;
	1069	}
	1070	.p11 {
	1071	font-size: 14px;
	1072	color: #333333;
	1073	letter-spacing: -0.26px;
	1074	text-align: justify;
	1075	line-height: 24px;
	1076	// margin-right: 10px;
	1077	}
	1078	.p12 {
	1079	font-size: 10px;
	1080	color: #3f3f3f;
	1081	letter-spacing: -0.19px;
	1082	text-align: justify;
	1083	line-height: 24px;
	1084	}
	1085	}
	1086	.p13 {
	1087	font-size: 10px;
	1088	color: #999999;
	1089	letter-spacing: -0.19px;
	1090	margin-right: 10px;
	1091	}
	1092	.p13-date {
	1093	font-size: 10px;
	1094	color: #999999;
	1095	letter-spacing: -0.19px;
	1096	margin-right: 5px;
	1097	}
	1098	picker {
	1099	width: 144rpx;
	1100	height: 40rpx;
	1101	display: flex;
	1102	position: relative;
	1103	.p14 {
	1104	font-size: 14px;
	1105	color: #666666;
	1106	letter-spacing: -0.26px;
	1107	text-align: center;
	1108	width: 124rpx;
	1109	border-bottom: 1px solid #cfcfcf;
	1110	height: 38rpx;
	1111	}
	1112	image {
	1113	width: 20rpx;
	1114	height: 20rpx;
	1115	position: absolute;
	1116	right: 20rpx;
	1117	top: 8rpx;
	1118	}
	1119	}
	1120	}
	1121	}
	1122	}
	1123	}
	1124	}
	1125	.choose {
	1126	width: 100%;
	1127	background: #ffffff;
	1128	border-radius: 12rpx;
	1129	margin-top: 20rpx;
	1130	padding: 40rpx 40rpx 112rpx 40rpx;
	1131	box-sizing: border-box;
	1132	.chooseItem {
	1133	width: 100%;
	1134	padding-bottom: 32rpx;
	1135	border-bottom: 1px solid #e9e9e9;
	1136	margin-bottom: 28rpx;
	1137	}
	1138	.chooseRes {
	1139	font-size: 12px;
	1140	color: #666666;
	1141	}
	1142	.itemsWrap {
	1143	display: flex;
	1144	flex-direction: row;
	1145	flex-wrap: wrap;
	1146	justify-content: flex-start;
	1147	align-items: center;
	1148	padding-top: 24rpx;
	1149	.item1 {
	1150	width: 64rpx;
	1151	height: 64rpx;
	1152	border-radius: 32rpx;
	1153	margin: 0 36rpx 24rpx 0;
	1154	transition: all 0.3s;
	1155	border: 1px solid #ffffff;
	1156	}
	1157	.item2 {
	1158	// width: 100rpx;
	1159	padding: 0 30rpx;
	1160	height: 60rpx;
	1161	margin: 0 20rpx 20rpx 0;
	1162	transition: all 0.3s;
	1163	background: #f2f2f2;
	1164	border-radius: 2px;
	1165	border-radius: 2px;
	1166	line-height: 60rpx;
	1167	text-align: center;
	1168	color: #666666;
	1169	font-size: 12px;
	1170	}
	1171	.active1 {
	1172	opacity: 0.7;
	1173	border: 1px solid #ff6b4a;
	1174	}
	1175	.active2 {
	1176	background: rgba(255, 107, 74, 0.15);
	1177	color: #ff6b4a;
	1178	}
	1179	}
	1180	}
	1181	.button {
	1182	position: fixed;
	1183	z-index: 10;
	1184	width: 100%;
	1185	height: 112rpx;
	1186	background-color: #ff6b4a;
	1187	font-size: 16px;
	1188	color: #ffffff;
	1189	line-height: 112rpx;
	1190	text-align: center;
	1191	// position: absolute;
	1192	bottom: 0;
	1193	left: 0;
	1194	}
	1195	}
	1196	/* sheet弹窗 */
	1197	.sheet {
	1198	width: 100%;
	1199	height: 100%;
	1200	position: fixed;
	1201	top: 150%;
	1202	left: 0upx;
	1203	bottom: 0upx;
	1204	right: 0upx;
	1205	background: rgba(0, 0, 0, 0.3);
	1206	z-index: 10000;
	1207	}
	1208
	1209	/* 显示时候的动画默认0.5s */
	1210	.sheetView {
	1211	width: 100%;
	1212	height: 0upx;
	1213	position: absolute;
	1214	bottom: 0upx;
	1215	background: white;
	1216	z-index: 10001;
	1217	transition: all 0.5s;
	1218	}
	1219	.sheetShow {
	1220	top: 0upx !important;
	1221	}
	1222	/* 关闭时的动画，时间自己可以设置0.5s*/
	1223	.sheeHide {
	1224	top: 120% !important;
	1225	transition: all 0.5s;
	1226	}
	1227
	1228	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	1229	.sheetView_active {
	1230	height: 942upx;
	1231	}
	1232	</style>
	1233

src/pages/frameDetail/frameDetail.vue

Diff comments View file @280fcb8

 <template>
   <view class="container">
     <view class="D1">
       <!-- 轮播图 -->
       <swiper
         class="swiperImage"
         :indicator-dots="true"
         :autoplay="true"
         :interval="4000"
         :duration="500"
       >
         <swiper-item
           v-for="(item, index) in goodInfo.pics"
           :key="index"
         >
           <image
             :src="item"
             mode="scaleToFill"
           ></image>
         </swiper-item>
       </swiper>
       <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
       <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
       <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
     </view>
-    <view
+    <!-- <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="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="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 === 1"
       >
         <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 === 0"
       >
         <view class="D3_list">
           <!-- <block>
             <view>主体</view>
             <view>商品产地：韩国</view>
             <view>包装清单：彩色隐形 * 1</view>
           </block> -->
           <!-- 迭代时建议配合接口修改 为数组 -->
           <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
             <view class="">
               年龄：<view
                 v-for="(item,index) in tag.prod_tag_age"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
             <view class="">
               颜色：<view
                 v-for="(item,index) in tag.prod_tag_color"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
             <view class="">
               脸型：<view
                 v-for="(item,index) in tag.prod_tag_face"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
             <view class="">
               赠品：<view
                 v-for="(item,index) in tag.prod_tag_freesend"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
             <view class="">
               保险：<view
                 v-for="(item,index) in tag.prod_tag_insurance"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
             <view class="">
               材质：<view
                 v-for="(item,index) in tag.prod_tag_metal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
             <view class="">
               个性：<view
                 v-for="(item,index) in tag.prod_tag_personal"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
             <view class="">
               场景：<view
                 v-for="(item,index) in tag.prod_tag_sense"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
             <view class="">
               性别：<view
                 v-for="(item,index) in tag.prod_tag_sex"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
             <view class="">
               风格：<view
                 v-for="(item,index) in tag.prod_tag_style"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
               </view>
             </view>
           </view>
           <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
             <view class="">
               重量：<view
                 v-for="(item,index) in tag.prod_tag_weight"
                 :key="index"
               >
                 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
               </view>
             </view>
           </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}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</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 goodInfo.judge_tag"
           :key="assess.key"
         >{{assess.name}}</view>
       </view>
     </view>
     <view
       class="D5"
       v-if="current !==2"
     >
       <view
         class="D5_fixed1"
         @click="consolg(goodInfo.prodIntro1)"
       >
         <image src="/static/img/detail/hr.png"></image>
         <view>商品详细</view>
         <image src="/static/img/detail/hr.png"></image>
       </view>
       <view
         class="D5_all"
         v-html="test"
       >
         <!-- <block>
           <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
         </block> -->
       </view>
     </view>
     <!-- 底部菜单 -->
     <view class="botton">
       <view
         @tap="toCart()"
         class="botton_1"
       >
         <view class="cart_icon">
           <image v-bind:src="imgShop.img" />
           <text>{{cartNumber}}</text>
         </view>
         <view class="botton_image">购物车</view>
       </view>
       <view class="botton_2">
         <view
           class="botton_input"
           @tap="showBottom(1)"
         >加入购物车</view>
         <view
           class="botton_now"
 		  @click="showBottom(2)"
         >立即购买</view>
       </view>
     </view>
     <BottomSheet
       v-if="isShowBottom"
       :isCart="isCart"
       @addCart="addCart"
       :pid="pid"
       :goodInfo="goodInfo"
       :isShowBottom="isShowBottom"
       @closeBottom="closeBottom"
     ></BottomSheet>
   </view>
 </template>
 <script>
 import store from '@/store'
 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
 export default {
 	components:{
 		BottomSheet,
 	},
   data () {
     return {
 	  isCart:Number,
 	  isShowBottom : false,	//底部弹窗开关
       test: '',
       goodType: 2,
       screenItems: [
         { current: 0, text: '商品介绍' },
         { current: 1, text: '规格参数' },
         { current: 2, text: '售后保障' },
       ],
       current: 0,
       starCount: 5,
       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' },
       ],
       esvalue: '宝贝好评率',
       introduction: {
         material: '钛合金',
         func: '抗疲劳/防辐射',
         rate: '男/女',
       },
       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,
       },
       tag: {
         prod_tag_freesend: [{
           label: '眼镜盒',
           value: '262',
         }],
       },
 	  pid: Number,
 	  // 购物车数据
 	  addCartList: {
 	    uid: Number,//用户的唯一识别码
 	    openid: String,
 	    mp_id: Number,//使用人
 	    sk_id: Number,//产品的sku_id
 	    num: Number,//购买数量
 	    pid: Number,//产品id
 	    price: Number,//价格
 	  	checkedSKU:Object//产品信息
 	  },
     }
   },
   onLoad: function ({ pid, sk_id: skId }) {
     this.pid = pid
     // console.log('sk_id=====>',sk_id)
     store.dispatch('read/fetch', {
       pid,
       // sk_id: skId,
     }).then(() => {
       this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
       this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
       this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
       this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
       this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
       this.parameter[5].slength = `${this.goodInfo.weight}mm`
       this.tag = this.goodInfo.tag
       this.test = this.goodInfo.prodIntro1
       this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
       // addCart
       this.addCartList.uid = this.$store.state.user.userInfo.uid
       this.addCartList.openid = this.$store.state.user.userInfo.openid
       this.addCartList.pid = this.goodInfo.pid
       this.addCartList.price = this.goodInfo.priceArea.Min_Price
     })
     store.dispatch('cart/getCartList')
     // console.log(this.$store.state.user.userInfo.uid + 'ssss')
   },
   computed: {
     updateGoodType () {
       return this.goodType
     },
     goodInfo () {
       // console.log(this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
     cartNumber() {
       return this.$store.state.cart.cartList.length || 0
     },
   },
   methods: {
     // 底部弹窗开关
     showBottom(isCart) {
       this.isCart = isCart
       this.isShowBottom = true
     },
     closeBottom() {
       this.isShowBottom = false
     },
     // 前往购物车
     toCart() {
       uni.switchTab({
         url: '/pages/cart/cart',
         success: res => {},
         fail: (error) => { console.log('跳转购物车失败======>', error) },
         complete: () => { console.log('toCart') },
       })
     },
     // 加入购物车
     addCart (mp_id,num,checkedSKU,sk_id) {
 		this.addCartList.mp_id = mp_id
 		this.addCartList.sk_id = sk_id
 		this.addCartList.num = num
 		this.addCartList.checkedSKU = checkedSKU
 		console.log('添加购物车的参数',this.addCartList)
       store.dispatch('cart/addCart', this.addCartList).then((res)=>{
 		  if(res.code == 1){
 			  uni.showToast({
 			  	title:'添加成功~',
 				icon:'success'
 			  })
 		  }
 		  // 再次请求购物车接口，实现实时更新
 		  store.dispatch('cart/getCartList', {
 		    uid: this.$store.state.user.userInfo.uid,
 		  })
 	  })
     },
     goPerchase () {
       // switch (this.updateGoodType) {
       //   case '1':
       console.log('goPerchase')
       uni.navigateTo({
         url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
         success: res => {},
         fail: (error) => { console.log('跳转参数选择失败======>', error) },
         complete: () => { console.log('goPerchase') },
       })
-      // 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
-      // }
     },
-    // 加入购物车
-    // addCart () {
-    //   store.dispatch('cart/addCart', {
-    //     uid: this.$store.state.user.userInfo.uid,
-    //     openid: this.$store.state.user.userInfo.openid,
-    //     pid: this.pid,
-    //     checkedSKU: {},
-    //   })
-    //   store.dispatch('cart/getCartList', {
-    //     uid: this.$store.state.user.userInfo.uid, // 用户id
-    //   })
-    // },
     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: 480rpx;
     image {
       max-width: 100%;
       max-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";
     display: flex;
     justify-content: space-between;
     .D1_number {
       color: #999999;
       font-size: 14px;
       font-family: "PingFangSC-Regular";
     }
   }
   .D1_name {
     font-size: 16px;
     font-family: "PingFangSC-Semibold";
     margin-top: 5px;
     .D1_name1 {
       font-weight: bold;
       font-size: 16px;
       color: #333333;
     }
   }
   .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 {
     display: grid;
     grid-row-gap: 10px;
     grid-column-gap: 4px;
   }
   .D4_list view {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     width: 118px;
     height: 24px;
     border-radius: 2px;
     background: #f2f2f2;
     color: #666666;
     // letter-spacing: 1px;
   }
 }
 .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%;
     margin-top: 30rpx;
     margin-right: 30rpx;
     margin-bottom: 180rpx;
     font-family: "PingFangSC-Regular";
     // border: #999999 solid 1.5px;
   }
 }
 .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;
     .cart_icon {
       position: relative;
       image {
       }
       text {
         position: absolute;
         color: white;
         font-size: 17px;
         background-color: red;
         min-height: 24px;
         min-width: 24px;
         line-height: 24px;
         right: -12%;
         top: -12px;
         text-align: center;
         border-radius: 24px;
         padding: 2px;
       }
     }
   }
   image {
     width: 42%;
     height: 26px;
   }
   .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;
   }
 }
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
   width: 0;
   height: 0;
   color: transparent;
 }
 </style>

src/static/img/detail/share-icon.png

Diff comments View file @280fcb8

1.54 KB

src/store/modules/details.js

Diff comments View file @280fcb8

File was created	1	import urlAlias from '../url'
	2	import request from '../request'
	3
	4	const {
	5	read,
	6	} = urlAlias
	7
	8	const state = {
	9	// 轮播图
	10	carousel: [
	11	'/static/img/detail/d9.png',
	12	],
	13	// 商品基本信息
	14	goodsInfo: {
	15	name: '暂无名称',
	16	price: '暂无价格',
	17	discountPrice: undefined,
	18	tradeNumber: undefined,
	19	},
	20	}
	21
	22	const mutations = {
	23	INIT: (state, { carousel, goodsInfo }) => {
	24	state.carousel = carousel
	25	state.goodsInfo = goodsInfo
	26	},
	27	}
	28
	29	const actions = {
	30	details({ commit }, param) {
	31	return new Promise((resolve, reject) => request({
	32	url: read,
	33	data: param,
	34	success: ({ data: { data } }) => {
	35	commit('INIT', {
	36	carousel: data.pics,
	37	goodsInfo: {
	38	name: data.p_name,
	39	price: data.priceArea.Min_Price,
	40	discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
	41	tradeNumber: data.trade_num,
	42	},
	43	})
	44	resolve(data)
	45	},
	46	fail: (res) => {
	47	console.log('fail status ===>', res)
	48	},
	49	}))
	50	},
	51	}
	52
	53	export default {
	54	namespaced: true,
	55	state,
	56	mutations,
	57	actions,
	58	}
	59

src/store/modules/read.js

Diff comments View file @280fcb8

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const {	4	const {
5	read	5	read,
6	} = urlAlias	6	} = urlAlias
7		7
8	const state = {	8	const state = {
9	goodInfo: {}	9	goodInfo: {},
10	}	10	}
11		11
12	const mutations = {	12	const mutations = {
13	INIT: (state, goodInfo) => {	13	INIT: (state, goodInfo) => {
14	state.goodInfo = goodInfo	14	state.goodInfo = goodInfo
15	}	15	},
16	}	16	}
17		17
18	const actions = {	18	const actions = {
19	fetch({ commit }, param) {	19	fetch({ commit }, param) {
20	// 由于购物车和用户推荐的价格要根据sk_id来获取	20	// 由于购物车和用户推荐的价格要根据sk_id来获取
21	const arg=Object.assign({},param)	21	const arg = Object.assign({}, param)
22	delete param.sk_id	22	delete param.sk_id
23	return new Promise((resolve, reject) => request({	23	return new Promise((resolve, reject) => request({
24	url: read,	24	url: read,
25	data: param,	25	data: param,
26	success: (res) => {	26	success: (res) => {
27	console.log('readParm====>',arg)	27	console.log('readParm====>', arg)
28	console.log('read====>',res.data.data)	28	console.log('read====>', res.data.data)
29	// 用一个新的对象来接收sk_id找的值	29	// 用一个新的对象来接收sk_id找的值
30	const Res=Object.assign({},res.data.data)	30	const Res = Object.assign({}, res.data.data)
31	if(arg.sk_id!=undefined){	31	if (arg.sk_id !== undefined) {
32	for (let i = 0; i < res.data.data.skuList.length; i++) {	32	for (let i = 0; i < res.data.data.skuList.length; i++) {
33	if(res.data.data.skuList[i].sk_id==arg.sk_id){	33	if (res.data.data.skuList[i].sk_id === arg.sk_id) {
34	Res.p_sale_price= res.data.data.skuList[i].real_price	34	Res.p_sale_price = res.data.data.skuList[i].real_price
35	console.log('陈工了')	35	console.log('陈工了')
36	}	36	}
37	}	37	}
38	}	38	}
39	console.log(Res)
40	commit('INIT', Res)	39	commit('INIT', Res)
41	resolve()	40	resolve(res.data)
42	},	41	},
43	fail: (res) => {	42	fail: (res) => {
44	console.log('fail status === > ', res)	43	console.log('fail status === > ', res)
45	},	44	},
46	complete: (res) => {	45	complete: (res) => {
47	console.log('complete status === > ', res)	46	console.log('complete status === > ', res)
48	}	47	},
49	}))	48	}))
50	}	49	},
51	}	50	}
52		51
53	export default {	52	export default {
54	namespaced: true,	53	namespaced: true,
55	state,	54	state,
56	mutations,	55	mutations,
57	actions	56	actions,
58	}	57	}
59		58