Adam / gulu-vue

Browse Code »

Commit 22e1420fab4604602a90616bcf586d952718d179

Authored by BigBoss 2020-06-05 19:55:24 +0800

1 parent 0bda9efecb

Exists in master

弹窗组件修改

Showing 6 changed files with 1408 additions and 1258 deletions Show diff stats

src/components.zip

View file @0bda9ef

No preview for this file type

src/components/BottomSheet/BottomSheet.vue

Diff comments View file @22e1420

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

src/pages/cart/cart.vue

Diff comments View file @22e1420

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<block v-if="cartList.length==0">	3	<block v-if="cartList.length==0">
4		4
5	</block>	5	</block>
6	<block v-else>	6	<block v-else>
7	<view class="card">	7	<view class="card">
8	<view class="cardHeader">	8	<view class="cardHeader">
9	<view	9	<view
10	v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"	10	v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11	@touchstart="pChange(pIsoPen)"
12	>	11	>
13	<span class="correct"></span>	12	<span class="correct"></span>
14	</view>	13	</view>
15	<image	14	<image
16	src="../../static/store.png"	15	src="../../static/store.png"
17	mode="aspectFill"	16	mode="aspectFill"
18	></image>	17	></image>
19	<text>非常戴镜</text>	18	<text>非常戴镜</text>
20	</view>	19	</view>
21	<view	20	<view
22	class="cardBody"	21	class="cardBody"
23	v-for="(item,index) in cartList"	22	v-for="(item,index) in cartList"
24	:key="index"	23	:key="index"
25	@longpress="delCart(item.cart_id,index)"	24	@longpress="delCart(item.cart_id,index)"
26	>	25	>
27	<view	26	<view
28	v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"	27	v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29	@touchstart="Change(childIsOpen[index],index)"
30	>	28	>
31	<span class="correct"></span>	29	<span class="correct"></span>
32	</view>	30	</view>
33	<view class="imageWrap">	31	<view class="imageWrap">
34	<image	32	<image
35	:src="item.img_index_url"	33	:src="item.img_index_url"
36	mode="aspectFit"	34	mode="aspectFit"
37	style="width: 188rpx;height: 168rpx;"	35	style="width: 188rpx;height: 168rpx;"
38	></image>	36	></image>
39	</view>	37	</view>
40	<view class="goodInfo">	38	<view class="goodInfo">
41	<!-- <view class="imageWrap">	39	<!-- <view class="imageWrap">
42	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>	40	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43	</view> -->	41	</view> -->
44	<view class="infoRight">	42	<view class="infoRight">
45	<view	43	<view
46	class="goodName"	44	class="goodName"
47	@tap="toGoods(item.pid,item.sk_id)"	45	@tap="toGoods(item.pid,item.sk_id)"
48	>{{item.p_name}}</view>	46	>{{item.p_name}}</view>
49	<view class="describ">	47	<view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
50	<view class="people">	48	<view class="desL">
51	使用人:{{item.peopleName}}	49	<view class="people">
52	</view>	50	使用人：{{item.peopleName}}
53	<view class="skuInfo">	51	</view>
54	{{item.sku_name}}	52	<view class="skuInfo">
55	</view>	53	{{item.sku_name}}
		54	</view>
		55	</view>
		56	<view class="desR">
		57	<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
		58	</view>
56	</view>	59	</view>
57	<view class="priceBox">	60	<view class="priceBox">
58	<view class="price">￥{{item.nowPrice*item.num}}</view>	61	<view class="price">￥{{item.nowPrice*item.num}}</view>
59	<text class="maxCount">(限购{{maxCount}}副)</text>	62	<text class="maxCount">(限购{{maxCount}}副)</text>
60	<view class="counter">	63	<view class="counter">
61	<view	64	<view
62	class="btn"	65	class="btn"
63	disabled="this.addDisabled"	66	disabled="this.addDisabled"
64	type="default"	67	type="default"
65	@tap="counter(index,false,item)"	68	@tap="counter(index,false,item)"
66	>-</view>	69	>-</view>
67	<text>{{item.num}}</text>	70	<text>{{item.num}}</text>
68	<view	71	<view
69	class="btn"	72	class="btn"
70	disabled="this.desDisabled"	73	disabled="this.desDisabled"
71	type="default"	74	type="default"
72	@tap="counter(index,true,item)"	75	@tap="counter(index,true,item)"
73	>+</view>	76	>+</view>
74	</view>	77	</view>
75	</view>	78	</view>
76	</view>	79	</view>
77	</view>	80	</view>
78	</view>	81	</view>
79	</view>	82	</view>
80	</block>	83	</block>
81	<view class="footer">	84	<view class="footer">
82	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	85	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
83	<view class="footerRight">	86	<view class="footerRight">
84	<view class="paybtn" @click="toComfirmOrder">立即结算</view>	87	<view class="paybtn" @click="toComfirmOrder">立即结算</view>
85	</view>	88	</view>
86	</view>	89	</view>
87		90	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
		91	:index="cartIndex"
		92	:pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
88	</view>	93	</view>
89	</template>	94	</template>
90		95
91	<script>	96	<script>
92		97
93	import store from '@/store'	98	import store from '@/store'
94		99	import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
95	export default {	100	export default {
		101	components:{
		102	BottomSheet,
		103	},
96	data() {	104	data() {
97	return {	105	return {
98	totalPrice: 0,	106	pid:Number,
99	pIsoPen: false,	107	isCart:Number,
100	// childIsOpen:[],	108	sk_id:String,
101	maxCount: 20,	109	mp_id:String,
		110	isShowBottom : false, //底部弹窗开关
		111	totalPrice: 0,
		112	pIsoPen: false,
		113	// childIsOpen:[],
		114	cart_id:Number,
		115	maxCount: 20,
		116	cartIndex:Number
102	}	117	}
103	},	118	},
104	computed: {	119	computed: {
105	// skInfo(){	120	// skInfo(){
106	// return filters()	121	// return filters()
107	// }	122	// }
		123	goodInfo () {
		124	// console.log(this.$store.state.read.goodInfo)
		125	return this.$store.state.read.goodInfo
		126	},
108	cartList() {	127	cartList() {
109	// console.log('cart-list', this.$store.state.cart.cartList);	128	// console.log('cart-list', this.$store.state.cart.cartList);
110	// this.totalPrice=0	129	// this.totalPrice=0
111	return this.$store.state.cart.cartList	130	return this.$store.state.cart.cartList
112	},	131	},
113	childIsOpen() {	132	childIsOpen() {
114	const temp = []	133	const temp = []
115	temp.length = this.$store.state.cart.cartList.length	134	temp.length = this.$store.state.cart.cartList.length
116	for (let i = 0; i < temp.length; i++) {	135	for (let i = 0; i < temp.length; i++) {
117	temp[i] = false	136	temp[i] = false
118	}	137	}
119	console.log('this.childisOPne===>', temp)	138	// console.log('this.childisOPne===>', temp)
120	return temp	139	return temp
121	},	140	},
122	},	141	},
		142	onShow() {
		143	this.pIsoPen = false
		144	},
123	onLoad: function() {	145	onLoad: function() {
124	// store.dispatch('cart/addCart', {
125	// uid: this.$store.state.user.userInfo.uid,
126	// openid: this.$store.state.user.userInfo.openid,
127	// mp_id: 7,
128	// sk_id: 7,
129	// num: 1,
130	// pid: 8,
131	// price: 128,
132	// checkedSKU:{},
133	// })
134	store.dispatch('cart/getCartList', {	146	store.dispatch('cart/getCartList', {
135	uid: this.$store.state.user.userInfo.uid, // 用户id	147	uid: this.$store.state.user.userInfo.uid, // 用户id
136	})	148	})
137	},	149	},
138	methods: {	150	methods: {
		151	//修改购物车
		152	chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
		153	// console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
		154	store.dispatch('cart/modiCart', {
		155	uid: this.$store.state.user.userInfo.uid,
		156	openid: this.$store.state.user.userInfo.openid,
		157	mp_id: mp_id,
		158	sk_id: sk_id,
		159	price: price,
		160	pid: pid,
		161	num: num,
		162	cart_id: cart_id,
		163	args: {
		164	index: index,
		165	},
		166	})
		167	store.dispatch('cart/getCartList', {
		168	uid: this.$store.state.user.userInfo.uid, // 用户id
		169	})
		170
		171	this.$forceUpdate()
		172	console.log('21212121212',this.cartList)
		173	},
		174	//底部弹窗开关
		175	showBottom(isCart,pid,skId,mp_id,cart_id,index){
		176	store.dispatch('read/fetch', {
		177	pid,
		178	sk_id: skId,
		179	}).then(()=>{
		180	this.cartIndex = index
		181	this.sk_id = skId;
		182	this.pid = pid;
		183	this.mp_id = mp_id;
		184	this.isCart = isCart;
		185	this.cart_id = cart_id;
		186	this.isShowBottom = true;
		187	})
		188	},
		189	closeBottom(){
		190	this.isShowBottom = false;
		191	},
139	toGoods(id, sk_id) {	192	toGoods(id, sk_id) {
140	console.log('cart-list', this.$store.state.cart.cartList)	193	console.log('cart-list', this.$store.state.cart.cartList)
141	console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)	194	console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
142	uni.navigateTo({	195	uni.navigateTo({
143	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,	196	url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
144	success: res => {},	197	success: res => {},
145	fail: () => {},	198	fail: () => {},
146	complete: () => {},	199	complete: () => {},
147	})	200	})
148	},	201	},
149	toComfirmOrder(){	202	toComfirmOrder(){
150	uni.navigateTo({	203	uni.navigateTo({
151	url:`../confirmOrder/confirmOrder`,	204	url:`../confirmOrder/confirmOrder`,
152	fail(res) {
153	console.log(res)
154	}
155	})	205	})
156	},	206	},
157	counter(index, isadd, item) {	207	counter(index, isadd, item) {
158	// console.log('===>>counter ===>num',num)	208	// console.log('===>>counter ===>num',num)
159	// console.log('===>>counter ===>isadd',isadd)	209	// console.log('===>>counter ===>isadd',isadd)
160	console.log('item=====>', item)	210	console.log('item=====>', item)
161	console.log('num=====>', item.num)	211	console.log('num=====>', item.num)
162	const nums = parseInt(item.num)	212	const nums = parseInt(item.num)
163	if (isadd) {	213	if (isadd) {
164	if (nums >= this.maxCount) {	214	if (nums >= this.maxCount) {
165	this.addDisabled = true	215	this.addDisabled = true
166	} else {	216	} else {
167	this.addDisabled = true	217	this.addDisabled = true
168	// 修改num	218	// 修改num
169	if (this.childIsOpen[index]) {	219	// if (this.childIsOpen[index]) {
170	this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice	220	// this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
171	}	221	// }
172	store.dispatch('cart/modiCart', {	222	store.dispatch('cart/modiCart', {
173	uid: this.$store.state.user.userInfo.uid,	223	uid: this.$store.state.user.userInfo.uid,
174	openid: this.$store.state.user.userInfo.openid,	224	openid: this.$store.state.user.userInfo.openid,
175	mp_id: item.mp_id,	225	mp_id: item.mp_id,
176	sk_id: item.sk_id,	226	sk_id: item.sk_id,
177	price: item.nowPrice,	227	price: item.nowPrice,
178	pid: item.pid,	228	pid: item.pid,
179	num: nums + 1,	229	num: nums + 1,
180	cart_id: item.cart_id,	230	cart_id: item.cart_id,
181	args: {	231	args: {
182	index: index,	232	index: index,
183	isadd: isadd,	233	isadd: isadd,
184	},	234	},
185	})	235	})
186	this.addDisabled = false	236	this.addDisabled = false
187	}	237	}
188	} else {	238	} else {
189	if (nums <= 1) {	239	if (nums <= 1) {
190	this.desDisabled = true	240	this.desDisabled = true
191	} else {	241	} else {
192	this.desDisabled = false	242	this.desDisabled = false
193	// post 请求修改相关参数	243	// post 请求修改相关参数
194	if (this.childIsOpen[index]) {	244	// if (this.childIsOpen[index]) {
195	this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice	245	// this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
196	}	246	// }
197	store.dispatch('cart/modiCart', {	247	store.dispatch('cart/modiCart', {
198	uid: this.$store.state.user.userInfo.uid,	248	uid: this.$store.state.user.userInfo.uid,
199	openid: this.$store.state.user.userInfo.openid,	249	openid: this.$store.state.user.userInfo.openid,
200	mp_id: item.mp_id,	250	mp_id: item.mp_id,
201	sk_id: item.sk_id,	251	sk_id: item.sk_id,
202	price: item.nowPrice,	252	price: item.nowPrice,
203	pid: item.pid,	253	pid: item.pid,
204	num: nums - 1,	254	num: nums - 1,
205	cart_id: item.cart_id,	255	cart_id: item.cart_id,
206	args: {	256	args: {
207	index: index,	257	index: index,
208	isadd: isadd,	258	isadd: isadd,
209	},	259	},
210	})	260	})
211	this.desDisabled = true	261	this.desDisabled = true
212	}	262	}
213	}	263	}
214	// store.dispatch('cart/getCartList', {	264
215	// uid: this.$store.state.user.userInfo.uid // 用户id
216	// })
217	},
218	Change(isopen, indexC) {
219	// console.log('lalla===>',isopen)
220	this.childIsOpen[indexC] = !isopen
221	if (!isopen) {
222	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
223	} else {
224	this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
225	}
226	let m = true
227	for (let i = 0; i < this.childIsOpen.length; i++) {
228	m = m & this.childIsOpen[i]
229	}
230	if (m === 1) {
231	this.pIsoPen = true
232	} else {
233	this.pIsoPen = false
234	}
235	},
236	pChange(isopen) {
237	this.pIsoPen = !isopen
238	for (let i = 0; i < this.childIsOpen.length; i++) {
239	this.childIsOpen[i] = !isopen
240	}
241	if (this.pIsoPen) {
242	// 计算总价逻辑
243	if (this.childIsOpen.length !== 0) {
244	for (let i = 0; i < this.childIsOpen.length; i++) {
245	if (this.childIsOpen[i]) {
246	this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
247	}
248	}
249	}
250	} else {
251	this.totalPrice = 0
252	}
253	},	265	},
		266	// Change(isopen, indexC) {
		267	// // console.log('lalla===>',isopen)
		268	// this.childIsOpen[indexC] = !isopen
		269	// if (!isopen) {
		270	// this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
		271	// } else {
		272	// this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
		273	// }
		274	// let m = true
		275	// for (let i = 0; i < this.childIsOpen.length; i++) {
		276	// m = m & this.childIsOpen[i]
		277	// }
		278	// if (m === 1) {
		279	// this.pIsoPen = true
		280	// } else {
		281	// this.pIsoPen = false
		282	// }
		283	// },
		284	// pChange(isopen) {
		285	// this.pIsoPen = !isopen
		286	// for (let i = 0; i < this.childIsOpen.length; i++) {
		287	// this.childIsOpen[i] = !isopen
		288	// }
		289	// if (this.pIsoPen) {
		290	// // 计算总价逻辑
		291	// if (this.childIsOpen.length !== 0) {
		292	// for (let i = 0; i < this.childIsOpen.length; i++) {
		293	// if (this.childIsOpen[i]) {
		294	// this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
		295	// }
		296	// }
		297	// }
		298	// } else {
		299	// this.totalPrice = 0
		300	// }
		301	// },
254	delCart(cart_id, index) {	302	delCart(cart_id, index) {
255	// console.log('userInfo',this.$store.state.user.userInfo)	303	// console.log('userInfo',this.$store.state.user.userInfo)
256	cart_id = parseInt(cart_id)	304	cart_id = parseInt(cart_id)
257	// console.log('delcart------>cart_id',cart_id)	305	// console.log('delcart------>cart_id',cart_id)
258	// console.log('cartlist====>delcart',this.$store.state.cart.cartList)	306	// console.log('cartlist====>delcart',this.$store.state.cart.cartList)
259	// console.log('delcart======>index',index)	307	// console.log('delcart======>index',index)
260	uni.showModal({	308	uni.showModal({
261	title: '是否删除该商品',	309	title: '是否删除该商品',
262	// content: '是否删除该商品',	310	// content: '是否删除该商品',
263	success: function (res) {	311	success: function (res) {
264	if (res.confirm) {	312	if (res.confirm) {
265	if (this.childIsOpen[index]) {	313	// if (this.childIsOpen[index]) {
266	this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)	314	// this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
267	}	315	// }
268	console.log('index===>',index)	316	console.log('index===>',index)
269	store.dispatch('cart/delCart', {	317	store.dispatch('cart/delCart', {
270	uid: this.$store.state.user.userInfo.uid,	318	uid: this.$store.state.user.userInfo.uid,
271	openid: this.$store.state.user.userInfo.openid,	319	openid: this.$store.state.user.userInfo.openid,
272	cart_id: cart_id, // 要修改的购物车id	320	cart_id: cart_id, // 要修改的购物车id
273	arg: index, // 由于action 传参是能接收两参数，因此将index放入对象	321	arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
274	})	322	})
275	}	323	}
276	}.bind(this),	324	}.bind(this),
277	})	325	})
278	},	326	},
279	},	327	},
280	}	328	}
281	</script>	329	</script>
282		330
283	<style lang="scss">	331	<style lang="scss">
284	.content {	332	.content {
285	min-height: 100vh;	333	min-height: 100vh;
286	background-color: #f2f2f2;	334	background-color: #f2f2f2;
287	display: flex;	335	display: flex;
288	flex-direction: column;	336	flex-direction: column;
289	align-items: center;	337	align-items: center;
290	justify-content: space-between;	338	justify-content: space-between;
291	padding: 20rpx 40rpx;	339	padding: 20rpx 40rpx;
292	box-sizing: border-box;	340	box-sizing: border-box;
293		341
294	.partentCheck {	342	.partentCheck {
295	width: 16px;	343	width: 16px;
296	height: 16px;	344	height: 16px;
297	border-radius: 22px;	345	border-radius: 22px;
298	border: 1px solid #cfcfcf;	346	border: 1px solid #cfcfcf;
299	background-color: #ffffff;	347	background-color: #ffffff;
300	margin: 24rpx 12rpx 24rpx 24rpx;	348	margin: 24rpx 12rpx 24rpx 24rpx;
301	}	349	}
302	.partentChecked {	350	.partentChecked {
303	width: 18px;	351	width: 18px;
304	height: 18px;	352	height: 18px;
305	border-radius: 22px;	353	border-radius: 22px;
306	background-color: #ff6b4a;	354	background-color: #ff6b4a;
307	margin: 24rpx 12rpx 24rpx 24rpx;	355	margin: 24rpx 12rpx 24rpx 24rpx;
308	.correct {	356	.correct {
309	display: inline-block;	357	display: inline-block;
310	position: relative;	358	position: relative;
311	width: 10rpx;	359	width: 10rpx;
312	height: 2rpx;	360	height: 2rpx;
313	background: #ffffff;	361	background: #ffffff;
314	line-height: 0;	362	line-height: 0;
315	font-size: 0;	363	font-size: 0;
316	position: relative;	364	position: relative;
317	top: -7px;	365	top: -7px;
318	left: 4px;	366	left: 4px;
319	-webkit-transform: rotate(45deg);	367	-webkit-transform: rotate(45deg);
320	}	368	}
321	.correct:after {	369	.correct:after {
322	content: "/";	370	content: "/";
323	display: block;	371	display: block;
324	width: 16rpx;	372	width: 16rpx;
325	height: 2rpx;	373	height: 2rpx;
326	background: #ffffff;	374	background: #ffffff;
327	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);	375	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
328	}	376	}
329	}	377	}
330		378
331	.card {	379	.card {
332	background-color: #ffffff;	380	background-color: #ffffff;
333	border-radius: 16rpx;	381	border-radius: 16rpx;
334	box-sizing: border-box;	382	box-sizing: border-box;
335	padding: 36rpx 36rpx 36rpx 18rpx;	383	padding: 36rpx 36rpx 36rpx 18rpx;
336	display: flex;	384	display: flex;
337	flex-direction: column;	385	flex-direction: column;
338	align-items: center;	386	align-items: center;
339	justify-content: space-between;	387	justify-content: space-between;
340	margin-bottom: 180rpx;	388	margin-bottom: 180rpx;
341	.cardHeader {	389	.cardHeader {
342	width: 100%;	390	width: 100%;
343	height: 36rpx;	391	height: 36rpx;
344	display: flex;	392	display: flex;
345	align-items: center;	393	align-items: center;
346	justify-content: flex-start;	394	justify-content: flex-start;
347	margin-bottom: 20rpx;	395	margin-bottom: 20rpx;
348	image {	396	image {
349	height: 32rpx;	397	height: 32rpx;
350	width: 32rpx;	398	width: 32rpx;
351	padding-left: 6px;	399	padding-left: 6px;
352	padding-right: 10px;	400	padding-right: 10px;
353	}	401	}
354	text {	402	text {
355	// font-family: PingFangSC-Regular;	403	// font-family: PingFangSC-Regular;
356	font-size: 14px;	404	font-size: 14px;
357	color: #333333;	405	color: #333333;
358	letter-spacing: -0.26px;	406	letter-spacing: -0.26px;
359	}	407	}
360	}	408	}
361	.cardBody {	409	.cardBody {
362	width: 100%;	410	width: 100%;
363	min-height: 300rpx;	411	min-height: 300rpx;
364	display: flex;	412	display: flex;
365	align-items: center;	413	align-items: center;
366	justify-content: space-between;	414	justify-content: space-between;
367	.goodInfo {	415	.goodInfo {
368	width: 390rpx;	416	width: 390rpx;
369	display: flex;	417	display: flex;
370	flex-direction: row;	418	flex-direction: row;
371	justify-content: flex-start;	419	justify-content: flex-start;
372	padding-left: 6px;	420	padding-left: 6px;
373		421
374	.imageWrap {	422	.imageWrap {
375	height: 188rpx;	423	height: 188rpx;
376	width: 188rpx;	424	width: 188rpx;
377	margin-right: 28rpx;	425	margin-right: 28rpx;
378		426
379	image {	427	image {
380	border-radius: 4px;	428	border-radius: 4px;
381	height: 188rpx;	429	height: 188rpx;
382	width: 188rpx;	430	width: 188rpx;
383	}	431	}
384	}	432	}
385	.infoRight {	433	.infoRight {
386	display: flex;	434	display: flex;
387	flex-direction: column;	435	flex-direction: column;
388	align-items: flex-start;	436	align-items: flex-start;
389	justify-content: space-between;	437	justify-content: space-between;
390	min-height: 240rpx;	438	min-height: 240rpx;
		439	width: 100%;
391	.goodName {	440	.goodName {
392	display: -webkit-box;	441	display: -webkit-box;
393	-webkit-box-orient: vertical;	442	-webkit-box-orient: vertical;
394	-webkit-line-clamp: 2;	443	-webkit-line-clamp: 2;
395	text-align: justify;	444	text-align: justify;
396	overflow: hidden;	445	overflow: hidden;
397	font-size: 28rpx;	446	font-size: 28rpx;
398	color: #333333;	447	color: #333333;
399	}	448	}
400	.describ {	449	.describ {
401	width: 100%;	450	width: 100%;
402	min-height: 80rpx;	451	min-height: 80rpx;
403	// box-sizing: border-box;	452	background: #F9F9F9;
404	// padding: 10rpx;	453	border-radius: 2px;
		454	box-sizing: border-box;
		455	padding: 10rpx;
405	font-size: 20rpx;	456	font-size: 20rpx;
406	letter-spacing: -0.23px;	457	letter-spacing: -0.23px;
407	text-align: justify;
408	color: #999999;	458	color: #999999;
409	view{	459	display: flex;
410	margin: 10rpx 0 10rpx 0 ;	460	justify-content: space-between;
		461	align-items: center;
		462	.desL{
		463
		464	view{
		465	margin: 10rpx 0 10rpx 0 ;
		466	}
411	}	467	}
		468
412	}	469	}
413	.priceBox {	470	.priceBox {
414	display: flex;	471	display: flex;
415	justify-content: space-between;	472	justify-content: space-between;
416	align-items: center;	473	align-items: center;
417	// margin-top: 26px;	474	// margin-top: 26px;
418	width: 100%;	475	width: 100%;
419	font-size: 14px;	476	font-size: 14px;
420	color: #999999;	477	color: #999999;
421	.maxCount {	478	.maxCount {
422	color: #999999;	479	color: #999999;
423	font-size: 24rpx;	480	font-size: 20rpx;
424	}	481	}
425	.price {	482	.price {
426	color: #ff6b4a;	483	color: #ff6b4a;
427	font-size: 28rpx;	484	font-size: 28rpx;
428	}	485	}
429	.counter {	486	.counter {
430	display: flex;	487	display: flex;
431	flex-direction: row;	488	flex-direction: row;
432	justify-content: space-between;	489	justify-content: space-between;
433	align-items: center;	490	align-items: center;
434	font-size: 28rpx;	491	font-size: 28rpx;
435	color: #333333;	492	color: #333333;
436	width: 122rpx;	493	width: 122rpx;
437	.btn {	494	.btn {
438	display: flex;	495	display: flex;
439	justify-content: center;	496	justify-content: center;
440	line-height: 32rpx;	497	line-height: 32rpx;
441	height: 32rpx;	498	height: 32rpx;
442	width: 32rpx;	499	width: 32rpx;
443	background-color: #f2f2f2;	500	background-color: #f2f2f2;
444	color: #cfcfcf;	501	color: #cfcfcf;
445	}	502	}
446	}	503	}

src/pages/frameDetail/components/BottomSheet.vue

View file @0bda9ef

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

src/pages/frameDetail/frameDetail.vue

Diff comments View file @22e1420

 <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
       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(true)"
+          @tap="showBottom(1)"
         >加入购物车</view>
         <view
           class="botton_now"
-		  @click="showBottom(false)"
+		  @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.vue';
+import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
 export default {
 	components:{
 		BottomSheet,
 	},
   data () {
     return {
-	  isCart:Boolean,
+	  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: 0,
+	  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,
+      // 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)=>{
-		  console.log('*-*-*-*--*-',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/store/modules/cart.js

Diff comments View file @22e1420

 import urlAlias from '../url'
 import request from '../request'
 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
 const state = {
   cartList: [],
 }
 const mutations = {
   INIT: (state, cartList) => {
     state.cartList = cartList
   },
   DEL: (state, index) => {
     console.log('mutations====>', state.cartList)
     state.cartList.splice(index, 1)
     console.log('mutations====>index', index)
     // state.cartList=delList
   },
   MODI: (state, args) => {
-    console.log('the num', state.cartList[args.index].num)
-    console.log('mutations====>isadd', args)
     state.cartList[args.index].num = args.num
-    console.log('the num', state.cartList[args.index].num)
   },
 }
 const actions = {
   // 获取购物车列表
     getCartList({ commit }, param) {
     return new Promise((resolve) =>  request({
       url: cartList,
       data: param,
       success: (res) => {
         console.log('cart===>接口数据', res.data.data)
         commit('INIT', res.data.data)
 		resolve(res.data.data)
       },
     }))
   },
   // 修改购物车数量
   modiCart({ commit }, param) {
     const arg = Object.assign({ num: param.num }, param.args)
     delete param.args
-    request({
+    return new Promise((resolve) =>  request({
       url: cartModi,
       data: param,
       success: (res) => {
-        console.log('modiCart-res=====>', res.data)
         console.log('modi-parm', param)
         commit('MODI', arg)
       },
       fail: (res) => {
         console.log('fail status === > ', res)
       },
       complete: (res) => {
         console.log('complete status === > ', res)
       },
-    })
+    }))
   },
   // 删除购物车商品
   delCart({ commit }, param) {
     const arg = param.arg
     delete param.arg
     request({
       url: cartDel,
       data: param,
       success: (res) => {
         console.log('del-parm', param)
         console.log('del-myparms==>', arg)
         commit('DEL', arg)
       },
       fail: (res) => {
         console.log('fail status === > ', res)
       },
       complete: (res) => {
         console.log('complete status === > ', res)
       },
     })
   },
   // 添加到购物车
   addCart({ commit }, param) {
     console.log('请求接口开始')
     return new Promise((resolve) =>  request({
       url: cartAdd,
       data: param,
       success: (res) => {
         console.log('add-parm', param)
         console.log('addcart===>res.data===>', res.data)
         // commit('INIT', res.data.data)
 		resolve(res.data)
       },
       fail: (res) => {
         console.log('添加购物车失败 === > ', res)
       },
       complete: (res) => {
         console.log('添加购物车完成 === > ', res)
       },
     }))
   },
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions,
 }