From 607bc3a4d6e98e95f8bc2f4adf328cf1331ae013 Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Mon, 1 Jun 2020 16:20:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E7=9B=B4=E6=8E=A5?=
=?UTF-8?q?=E8=B4=AD=E4=B9=B0=E7=9A=84=E6=B5=81=E7=A8=8B=EF=BC=8C=E6=B7=BB?=
=?UTF-8?q?=E5=8A=A0=E5=BC=B9=E7=AA=97=EF=BC=8C=E9=80=89=E6=8B=A9=E4=BF=A1?=
=?UTF-8?q?=E6=81=AF=E7=9A=84=E5=90=88=E5=B9=B6=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/common/data.js | 133 ---
src/pages/confirmOrder/confirmOrder.vue | 32 +-
src/pages/frameDetail/components/BottomSheet.vue | 1260 ++++++++++++++++++++++
src/pages/frameDetail/frameDetail.vue | 40 +-
src/pages/myOrder/components/OrderCard.vue | 8 +-
src/pages/myOrder/myOrder.vue | 2 +-
src/pages/myOrderPaying/myOrderPaying.vue | 20 +-
src/store/modules/cart.js | 12 +-
src/store/modules/orderRead.js | 3 +-
9 files changed, 1333 insertions(+), 177 deletions(-)
delete mode 100644 src/common/data.js
create mode 100644 src/pages/frameDetail/components/BottomSheet.vue
diff --git a/src/common/data.js b/src/common/data.js
deleted file mode 100644
index 198bc0b..0000000
--- a/src/common/data.js
+++ /dev/null
@@ -1,133 +0,0 @@
-// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
-// 组件的返回结果是有菜单数组下标形式返回,
-// 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
-/*
-[
- {
- "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
- "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
- "submenu":[ //对象数组类型 必填项 子菜单数据
- {
- "name":"", //字符串类型 必填项 菜单名称
- "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
- "submenu":[ //对象数组类型 必填项 子菜单数据
- {
- "name":"", //字符串类型 必填项 菜单名称
- "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
- "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
- {
- "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
- "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
- }
- ]
- }
- ]
- }
- ]
- }
-]
-*/
-
-//0.0.4版本起 返回结果将有两部分组成:
-/*
-{
- index:[], //旧版本的下标数组形式
- value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
-}
-*/
-// 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
-// 数据较长，请仔细查看。
-
-
-export default [
- {
- "name":'综合',
- "type": 'filter',
- "submenu": [{
- "submenu": [
-
- ]
- },
- ],
- },
- {
- "name":'品牌',
- "type": 'filter',
- "submenu": [{
- // "name": '品牌',
- // "value": "品牌",
- "submenu": [{
- "name": "帕森",
- "value": "帕森",
- },
- {
- "name": "海伦凯勒",
- "value": "海伦凯勒",
- },
- ]
- },
- ]
- },
- {
- "name":'功能',
- "type": 'filter',
- "submenu": [{
- "submenu": [{
- "name": "满减活动",
- "value": "满减活动"
- },
- {
- "name": "打折优惠",
- "value": "打折优惠"
- },
- {
- "name": "会员专享",
- "value": "会员专享"
- }
- ]
- }
- ]
- },
- {
- "name":'材质',
- "type": 'filter',
- "submenu": [{
- "submenu": [{
- "name": "满减活动",
- "value": "满减活动"
- },
- {
- "name": "打折优惠",
- "value": "打折优惠"
- },
- {
- "name": "会员专享",
- "value": "会员专享"
- }
- ]
- }
- ]
- },
- {
- "name":'折扣',
- "type": 'filter',
- "submenu": [{
- "name": "折扣(多选)",
- "submenu": [{
- "name": "满减活动",
- "value": "满减活动"
- },
- {
- "name": "打折优惠",
- "value": "打折优惠"
- },
- {
- "name": "会员专享",
- "value": "会员专享"
- }
- ]
- }
- ]
- }
-]
-
diff --git a/src/pages/confirmOrder/confirmOrder.vue b/src/pages/confirmOrder/confirmOrder.vue
index 1e69284..f4467bc 100644
--- a/src/pages/confirmOrder/confirmOrder.vue
+++ b/src/pages/confirmOrder/confirmOrder.vue
@@ -34,7 +34,7 @@
</view>
<view class="order-user-body">
<image src="../../static/myorder-paying-location.png"></image>
- <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
+ <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
</view>
<image
class="arrow"
@@ -59,7 +59,7 @@
mode="aspectFill"
></image>
<view class="infoRight">
- <text class="goodName">商品名称商品名称商品名称名称名称</text>
+ <text class="goodName">{{goodInfo.p_name}}</text>
<text class="remarks">支持7天无理由退货 顺丰发货</text>
<view class="priceBox">
<view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
@@ -91,6 +91,9 @@
>{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
</block>
</text></view>
+ <view class="shippingMethod">使用人 <text>
+ {{name}}
+ </text></view>
<view class="shippingMethod">配送方式 <text>快递</text></view>
<view class="message">买家留言
<input
@@ -179,6 +182,7 @@ import MD5Util from '../../utils/md5'
export default {
data() {
return {
+ name:String,
addAddress: '添加收货地址',
count: 1,
pid: 0,
@@ -192,8 +196,14 @@ export default {
// isAnonymous:
}
},
- onLoad({ pid, addressId, isCart }) {
- this.pid = pid
+ onLoad({ pid, addressId, isCart ,count,name}) {
+ this.pid = pid;
+ this.count = count;
+ this.name = name;
+ store.dispatch('read/fetch', {
+ pid,
+ })
+ console.log('++++++++++++'+pid,addressId,isCart,count)
// 若已经选择地址
if (addressId) {
store
@@ -216,13 +226,10 @@ export default {
}
})
}
- store.dispatch('read/fetch', {
- pid,
- })
},
computed: {
goodInfo() {
- console.log('state', this.$store.state)
+ console.log('state', this.$store.state.read.goodInfo)
return this.$store.state.read.goodInfo
},
skuInfo() {
@@ -320,7 +327,7 @@ export default {
})
// 跳转订单详情页->状态 待收货
uni.reLaunch({
- url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
+ url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,
})
},
fail: (res) => {
@@ -331,7 +338,7 @@ export default {
})
// 跳转订单详情页->状态 待付款
uni.reLaunch({
- url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
+ url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,
})
},
complete: () => {
@@ -399,7 +406,7 @@ export default {
box-sizing: border-box;
.orderInfo {
width: 670rpx;
- height: 488rpx;
+ min-height: 488rpx;
background-color: #ffffff;
border-radius: 20rpx;
box-sizing: border-box;
@@ -629,7 +636,8 @@ export default {
height: 108rpx;
width: 100%;
align-items: center;
- margin-left: 126rpx;
+ padding-left: 126rpx;
+ box-sizing: border-box;
.name {
display: flex;
justify-content: space-between;
diff --git a/src/pages/frameDetail/components/BottomSheet.vue b/src/pages/frameDetail/components/BottomSheet.vue
new file mode 100644
index 0000000..c0c844f
--- /dev/null
+++ b/src/pages/frameDetail/components/BottomSheet.vue
@@ -0,0 +1,1260 @@
+<template>
+ <view class="content">
+ <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
+ <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
+ <view class="content">
+ <view class="goodInfo">
+ <view class="imageWrap">
+ <image
+ :src="goodInfo.img_index_url"
+ mode="aspectFill"
+ style="width: 188rpx;height: 168rpx;"
+ ></image>
+ </view>
+ <view class="infoRight">
+ <text class="goodName">{{goodInfo.p_name}}</text>
+ <text class="remarks">支持7天无理由退货 顺丰发货</text>
+ <view class="priceBox">
+ <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
+ <text>(限购{{maxCount}}副)</text>
+ <view class="counter">
+ <view
+ class="btn"
+ disabled="this.addDisabled"
+ type="default"
+ @click="counter(false)"
+ >-</view>
+ <text>{{count}}</text>
+ <view
+ class="btn"
+ disabled="this.desDisabled"
+ type="default"
+ @click="counter(true)"
+ >+</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="peopleChoose">
+ <view class="title">选择使用人</view>
+ <view class="loveList">
+ <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
+ @click="onClickLoveItem(index,item.name)">
+ {{item.name}}
+ </view>
+ </view>
+ </view>
+ <view class="goods-data">
+ <view class="opCollapse">
+ <view class="body">
+ <template v-if="opIsOpen">
+ <view class="goods-form">
+ <view class="p1">
+ <image class="image2" src="../../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
+ 填写验光数据
+ </view>
+ <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
+ <view class="picker">
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="pd">验光单取名:</text>
+ </view>
+ <input type="text" @blur="handleInput" class="input"
+ placeholder="请输入名称" maxlength="20" :value="name" />
+ </view>
+ </view>
+ <view class="picker" >
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="p11">{{pickerInfoList[0].nameC}}</text>
+ <text class="p12">{{pickerInfoList[0].nameE}}</text>
+ </view>
+ <text class="p13">左 (OD)</text>
+ <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
+ <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
+ <view class="p14">
+ {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
+ </picker>
+ <text class="p13">右 (OS)</text>
+ <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
+ <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
+ <view class="p14">
+ {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
+ </picker>
+ </view>
+ </view>
+ <view class="picker" >
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="p11">{{pickerInfoList[1].nameC}}</text>
+ <text class="p12">{{pickerInfoList[1].nameE}}</text>
+ </view>
+ <text class="p13">左 (OD)</text>
+ <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
+ <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
+ <view class="p14">
+ {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
+ </picker>
+ <text class="p13">右 (OS)</text>
+ <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
+ <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
+ <view class="p14">
+ {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
+ </picker>
+ </view>
+ </view>
+ <view class="picker" >
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="p11">{{pickerInfoList[2].nameC}}</text>
+ <text class="p12">{{pickerInfoList[2].nameE}}</text>
+ </view>
+ <text class="p13">左 (OD)</text>
+ <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
+ <view class="p14">
+ {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ </picker>
+ <text class="p13">右 (OS)</text>
+ <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
+ <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
+ <view class="p14">
+ {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
+ </picker>
+ </view>
+ </view>
+ <view class="picker">
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="pd">瞳距:</text>
+ </view>
+ <input type="digit" @change="handleInputPd" class="input"
+ placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
+ </view>
+ </view>
+ <view class="picker" >
+ <view class="picker-choice">
+ <view class="choice-left">
+ <text class="p11">{{pickerInfoList[3].nameC}}</text>
+ </view>
+ <text class="p13-date">年 (Y)</text>
+ <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
+ <view class="p14" style="width: 30px;">
+ {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ </picker>
+ <text class="p13-date">月 (M)</text>
+ <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
+ <view class="p14" style="width: 30px;">
+ {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ </picker>
+ <text class="p13-date">日 (D)</text>
+ <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
+ <view class="p14" style="width: 30px;">
+ {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
+ <image src="../../../static/detail-tabicon.png" ></image>
+ </view>
+ </picker>
+ </view>
+ </view>
+ <view class="confirm">
+ <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
+ <text>确认以上输入信息来源于我的验光数据!</text>
+ </view>
+ </view>
+ </template>
+ <template v-else>
+ <view
+ v-for="item in pickerInfoList"
+ :key="item.key"
+ class="bodyBox"
+ >
+ <template v-if="item.nameC==='验光日期'">
+ <text class="names">{{item.nameC}}</text>
+ <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
+ <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
+ <text>{{item.nameArray3[item.nameIndex2]}}日</text>
+ </template>
+ <template v-else>
+ <template v-if="item.nameC==='度数'">
+ <text style="display: inline;">*</text>
+ </template>
+
+ <text class="names">{{item.nameC}}</text>
+ <text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
+ <text>右 {{item.nameArray2[item.nameIndex2]}}</text>
+ </template>
+ </view>
+ </template>
+ </view>
+ </view>
+ </view>
+ <view class="choose">
+ <view
+ class="chooseItem_1_content"
+ v-for="(item,index) in attrList"
+ :key="index"
+ >
+ <UniCollapse @change="changeShow(index)">
+ <UniCollapseItem
+ :open="show[index]"
+ :title="item.meta_name"
+ showAnimation=false
+ >
+ <view class="chooseItem_1_content">
+ <view class="itemsWrap">
+ <view
+ class="item2"
+ v-for="(one,i) in item.attr"
+ :key="i"
+ :class="{ active2: current[index] === i }"
+ @click="onClickItem(index, i)"
+ >{{one.name}}</view>
+ </view>
+ </view>
+ </UniCollapseItem>
+ </UniCollapse>
+ <view
+ class="chooseRes"
+ v-show="!show[index]"
+ >* {{attrList[index].attr[current[index]].name}}</view>
+ </view>
+ <!-- <view class="chooseItem_1 chooseItem">
+ <UniCollapse @change="change(1)">
+ <UniCollapseItem
+ open=true
+ title="款式挑选"
+ showAnimation=false
+ >
+ <view
+ class="chooseRes"
+ v-show="show[1]"
+ >* {{chooseRes1}}</view>
+ <view class="chooseItem_1_content">
+ <view class="itemsWrap">
+ <view
+ class="item1"
+ v-for="(item,index) in chooseItem1"
+ :key="index"
+ :style="item.style"
+ :class="{ active1: current1 === index }"
+ @click="onClickItem1(index)"
+ ></view>
+ </view>
+ </view>
+ </UniCollapseItem>
+ </UniCollapse>
+ <view
+ class="chooseRes"
+ v-show="show[1]"
+ >* {{chooseRes1}}</view>
+ </view>
+ <view class="chooseItem_2 chooseItem ">
+ <UniCollapse @change="change(2)">
+ <UniCollapseItem
+ open=true
+ title="直径"
+ showAnimation=false
+ >
+ <view class="chooseItem_1_content">
+ <view class="itemsWrap">
+ <view
+ class="item2"
+ v-for="(item,index) in chooseItem2"
+ :key="index"
+ :class="{ active2: current2 === index }"
+ @click="onClickItem2(index)"
+ >{{item.num}}</view>
+ </view>
+ </view>
+ </UniCollapseItem>
+ </UniCollapse>
+ <view
+ class="chooseRes"
+ v-show="show[2]"
+ >* {{chooseRes2}}</view>
+ </view>
+ <view class="chooseItem_3 chooseItem">
+ <UniCollapse @change="change(3)">
+ <UniCollapseItem
+ open=true
+ title="度数"
+ showAnimation=false
+ >
+ <view class="chooseItem_1_content">
+ <view class="itemsWrap">
+ <view
+ class="item2"
+ v-for="(item,index) in chooseItem3"
+ :key="index"
+ :class="{ active2: current3 === index }"
+ @click="onClickItem3(index)"
+ >{{item}}</view>
+ </view>
+ </view>
+ </UniCollapseItem>
+ </UniCollapse>
+ <view
+ class="chooseRes"
+ v-show="show[3]"
+ >* {{chooseRes3}}</view>
+ </view> -->
+ </view>
+ <view
+ class="button"
+ @click="toComfirmOrder"
+ >
+ 立即结算
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </view>
+</template>
+<script>
+import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
+import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
+import store from '@/store'
+ export default {
+ components: {
+ UniCollapse,
+ UniCollapseItem,
+ },
+ props: {
+ isShowBottom : Boolean,
+ pid: Number,
+ goodInfo:Object
+ },
+ data() {
+ return {
+ loveCurrent:Number,
+ count: 1,
+ // pid: 0,
+ maxCount: 20,
+ dataName: '', // 验光数据人员名称
+ isDataName: false, // 是否是已存在的人员数据
+ dataConfirm: false, // 已确认所输入验光数据
+ opIsOpen: true,
+ addDisabled: false,
+ desDisabled: false,
+ // current1: 0,
+ // current2: 0,
+ // current3: 0,
+ current: [],
+ show: [],
+ chooseRes1: {
+ sku_name: 'Miss 黑二代【减龄自然】',
+ sk_id: '128',
+ },
+ checkedData: {},
+ chooseRes2: '14.0',
+ chooseRes3: 0,
+ chooseItem1: [
+ { style: 'opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);', describ: 'Miss 黑1代【减龄自然】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑二代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);', describ: 'Miss 黑3代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
+ { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
+ { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);', describ: 'Miss 黑4代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);', describ: 'Miss 黑5代【防紫外线】' },
+ { style: 'opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);', describ: 'Miss 黑6代【防紫外线】' },
+ { style: 'background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);', describ: 'Miss 黑7代【防紫外线】' },
+ ],
+ chooseItem2: [
+ { num: '14.0' },
+ { num: '14.2' },
+ { num: '14.4' },
+ { num: '14.5' },
+ ],
+ chooseItem3: [0, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 470, 500, 525, 550, 575, 600, 1000],
+ // 度数相关数据
+ pickerInfoList: [
+ { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
+ { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
+ { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
+ { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
+ ],
+ confirm: false, // 用户是否确认
+ tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
+ name: '',
+ oldname: '', // 用于判读用户是否改变名字
+ pickerInfoChioce: {
+ leftSph: '',
+ rightSph: '',
+ leftCyl: '',
+ rightCyl: '',
+ leftAxi: '',
+ rightAxi: '',
+ time: {
+ year: 0,
+ month: 0,
+ day: 0,
+ },
+ },
+ pd: '', // 瞳距
+ oldpd: '', // 用于判断用户是否改变瞳距
+ kinds: 1, // kinds=1，提交为新增验光，2为修改
+ mp_id: Number,
+ }
+ },
+ computed: {
+ loveList() {
+ console.log('**********loveList',this.$store.state.myLoveList.loveList)
+ return this.$store.state.myLoveList.loveList || []
+ },
+ attrList() {
+ let attrList = this.$store.state.read.goodInfo.attrList
+ if(attrList !== undefined){
+ return attrList
+ }else{
+ return []
+ }
+ },
+ skuList() {
+ return this.$store.state.read.goodInfo.skuList
+ },
+ mpList() {
+ return this.$store.state.myLoveList.loveList
+ },
+ },
+ created() {
+ const pid = this.pid
+ console.log('this.goodInfo',this.goodInfo)
+ store.dispatch('read/fetch', {
+ pid,
+ }).then(() => {
+ const current = []
+ const show = []
+ for (let index = 0; index < this.attrList.length; index++) {
+ current.push(0)
+ show.push(true)
+ }
+ this.current = current
+ this.show = show
+ })
+
+ //获取关心的人列表
+ store.dispatch('myLoveList/getLoveList', {
+ uid: this.$store.state.user.userInfo.uid,
+ });
+
+ store.dispatch('myLoveList/getLoveList')
+
+ // 初始化SPL、CYL、AXI的值
+ for (let j = 0; j < 3; j++) {
+ for (let i = -12; i < 6; i++) {
+ this.pickerInfoList[j].nameArray1.push(i)
+ this.pickerInfoList[j].nameArray1.push(i + 0.5)
+ this.pickerInfoList[j].nameArray2.push(i)
+ this.pickerInfoList[j].nameArray2.push(i + 0.5)
+ if (i >= -6) {
+ this.pickerInfoList[j].nameArray1.push(i + 0.25)
+ this.pickerInfoList[j].nameArray1.push(i + 0.75)
+ this.pickerInfoList[j].nameArray2.push(i + 0.25)
+ this.pickerInfoList[j].nameArray2.push(i + 0.75)
+ }
+ if (i === 5) {
+ this.pickerInfoList[j].nameArray1.push(i + 1)
+ this.pickerInfoList[j].nameArray2.push(i + 1)
+ }
+ }
+ }
+ // 初始化日期值
+ for (let i = 1; i < 32; i++) {
+ this.pickerInfoList[3].nameArray3.push(i)
+ }
+ // 初始化年份前后五年
+ const myDate = new Date()
+ const nowYear = myDate.getFullYear()
+ for (let i = 0; i < 5; i++) {
+ this.pickerInfoList[3].nameArray1.push(nowYear - i)
+ }
+ },
+ name : "bottomSheet",
+ methods: {
+ onClickLoveItem(index,name){
+ const loveList = this.loveList
+ for (let index = 0; index < loveList.length; index++) {
+ if (name === loveList[index].name && name!==this.name) {
+ this.isDataName = true
+ uni.showModal({
+ title: '提示',
+ content: `是否填充已有的"${name}"的数据`,
+ success: (res) => {
+ if (res.confirm) {
+ this.kinds = 2
+ this.name = loveList[index].name
+ this.pd = loveList[index].pd
+ this.mp_id = loveList[index].mp_id
+ this.oldname = loveList[index].name
+ this.oldpd = loveList[index].pd
+ this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
+ this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
+ this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
+ this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
+ this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
+ this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
+ this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
+ if (loveList[index].in_time.toString().slice(5, 6) === 0) {
+ this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
+ } else {
+ this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
+ }
+ if (loveList[index].in_time.toString().slice(8, 9) === 0) {
+ this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
+ } else {
+ this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
+ }
+ } else if (res.cancel) {
+ this.kinds = 2
+ }
+ },
+ })
+ }
+ }
+ this.name = name;
+ this.loveCurrent = index;
+ },
+ closeSheet(){
+ this.$emit('closeBottom');
+ },
+ stopEvent(){ //@click.stop防止事件冒泡
+
+ },
+ moveHandle(){ //不让页面滚动
+
+ },
+ // picker相关功能
+ handleInput(e) {
+ this.name = e.target.value
+ this.isDataName = false
+ console.log('e---->', e)
+ const mpList = this.mpList
+ // console.log('mpList===>', mpList)
+ for (let index = 0; index < mpList.length; index++) {
+ if (e.detail.value === mpList[index].name) {
+ this.isDataName = true
+ uni.showModal({
+ title: '提示',
+ content: `是否填充已有的"${e.detail.value}"的数据`,
+ success: (res) => {
+ if (res.confirm) {
+ this.kinds = 2
+ console.log('args===>', index)
+ // const mpList=Object.assign({},this.$store.state.mympList.mpList)
+ console.log('mpList===>', mpList)
+ this.name = mpList[index].name
+ this.pd = mpList[index].pd
+ this.mp_id = mpList[index].mp_id
+ this.oldname = mpList[index].name
+ this.oldpd = mpList[index].pd
+ // 将kinds =2时的值传到该页面
+ this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
+ this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
+ this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
+ this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
+ this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
+ this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
+ this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
+ if (mpList[index].in_time.toString().slice(5, 6) === 0) {
+ this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
+ } else {
+ this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
+ }
+ if (mpList[index].in_time.toString().slice(8, 9) === 0) {
+ this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
+ } else {
+ this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
+ }
+ // this.checkedData = mpList[index]
+ // console.log('checkedData', this.checkedData)
+ } else if (res.cancel) {
+ this.kinds = 2
+ }
+ },
+ })
+ }
+ }
+ },
+ handleInputPd(e) {
+ // 只能输入正浮点数或正数
+ if (/^\d+(\.\d+)?$/.test(e.target.value)) {
+ this.pd = e.target.value
+ } else {
+ uni.showToast({
+ title: '请输入有效数据;示例:89',
+ icon: 'none',
+ duration: 2000,
+ })
+ this.pd = ''
+ }
+ },
+ changeConfirm() {
+ this.confirm = !this.confirm
+ },
+ bindPickerChange01: function(e) {
+ this.pickerInfoList[0].nameIndex1 = e.target.value
+ this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
+ },
+ bindPickerChange02: function(e) {
+ this.pickerInfoList[0].nameIndex2 = e.target.value
+ this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
+ },
+
+ bindPickerChange11: function(e) {
+ this.pickerInfoList[1].nameIndex1 = e.target.value
+ this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
+ },
+ bindPickerChange12: function(e) {
+ this.pickerInfoList[1].nameIndex2 = e.target.value
+ this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
+ },
+
+ bindPickerChange21: function(e) {
+ this.pickerInfoList[2].nameIndex1 = e.target.value
+ this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
+ },
+ bindPickerChange22: function(e) {
+ this.pickerInfoList[2].nameIndex2 = e.target.value
+ this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
+ },
+
+ bindPickerChange41: function(e) {
+ this.pickerInfoList[3].nameIndex1 = e.target.value
+ this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
+ },
+ bindPickerChange42: function(e) {
+ this.pickerInfoList[3].nameIndex2 = e.target.value
+ this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
+ },
+ bindPickerChange43: function(e) {
+ this.pickerInfoList[3].nameIndex3 = e.target.value
+ this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
+ },
+ changeShow(num) {
+ this.show[num] = !this.show[num]
+ this.$forceUpdate()
+ },
+ onClickItem(index, i) {
+ if (this.current[index] !== i) {
+ this.current[index] = i
+ }
+ this.$forceUpdate()
+ },
+ counter(isadd) {
+ if (isadd) {
+ this.count >= this.maxCount ? this.addDisabled = true : this.count++
+ } else {
+ this.count <= 1 ? this.desDisabled = true : this.count--
+ }
+ },
+ toComfirmOrder() {
+ // 先处理验光部分的逻辑，如果ok在跳转
+ let flag = 0
+ if (this.name === '') {
+ uni.showToast({
+ title: '请输入验光单取名',
+ icon: 'none',
+ duration: 2000,
+ })
+ } else {
+ if (this.pd === '') {
+ uni.showToast({
+ title: '请输入瞳距',
+ icon: 'none',
+ duration: 2000,
+ })
+ } else {
+ if (this.kinds === 1) {
+ // 添加用户验光单
+ console.log('kinds====>', this.pickerInfoChioce.leftSph)
+ console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
+ console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
+ if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
+ this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
+ this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
+ ) {
+ uni.showToast({
+ title: '请输入您的验光数据',
+ icon: 'none',
+ duration: 2000,
+ })
+ } else {
+ if (this.confirm) {
+ store.dispatch('myLoveList/addMylove', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ // mp_name: this.$store.state.user.userInfo.mp_name,
+ leftSph: this.pickerInfoChioce.leftSph,
+ rightSph: this.pickerInfoChioce.rightSph,
+ leftCyl: this.pickerInfoChioce.leftCyl,
+ rightCyl: this.pickerInfoChioce.rightCyl,
+ leftAxi: this.pickerInfoChioce.leftAxi,
+ rightAxi: this.pickerInfoChioce.rightAxi,
+ pd: this.pd, // 瞳距
+ mp_name: this.name,
+ // time: this.pickerInfoChioce.time,
+ // img_url2: "http://localhost:8087/images/shop_1/1/",
+ }).then(({ mp_id: mpId }) => {
+ this.mp_id = mpId
+ })
+ flag = 1
+ } else {
+ uni.showToast({
+ title: '请确认您的验光数据',
+ icon: 'none',
+ duration: 3000,
+ })
+ }
+ }
+ }
+ if (this.kinds === 2) {
+ if (this.confirm) {
+ const leftList = ['leftSph', 'leftCyl', 'leftAxi']
+ const rightList = ['rightSph', 'rightCyl', 'rightAxi']
+ // let flag=0;
+ if (this.name !== this.oldname) {
+ store.dispatch('myLoveList/updateMylove', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ mp_id: this.mp_id,
+ keyname: 'name',
+ keyvalue: this.name,
+ })
+ flag = 1
+ }
+ if (this.pd !== this.oldpd) {
+ store.dispatch('myLoveList/updateMylove', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ mp_id: this.mp_id,
+ keyname: 'pd',
+ keyvalue: this.pd,
+ })
+ flag = 1
+ }
+ // 先验证是否输入有无空
+ let q = true
+ for (let k = 0; k < 3; k++) {
+ q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
+ this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
+ }
+ if (q) {
+ for (let j = 0; j < 3; j++) {
+ if (this.pickerInfoList[j].nameIndex1 !== 0) {
+ store.dispatch('myLoveList/updateMylove', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ mp_id: this.mp_id,
+ keyname: leftList[j],
+ keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
+ })
+ }
+ if (this.pickerInfoList[j].nameIndex2 !== 0) {
+ store.dispatch('myLoveList/updateMylove', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ mp_id: this.mp_id,
+ keyname: rightList[j],
+ keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
+ })
+ }
+ flag = 1
+ }
+ } else {
+ flag = 0
+ uni.showToast({
+ title: '请输入您的验光数据',
+ icon: 'none',
+ duration: 2000,
+ })
+ }
+ if (flag !== 0) {
+ store.dispatch('myLoveList/getLoveList', {
+ uid: this.$store.state.user.userInfo.uid,
+ })
+ }
+ } else {
+ uni.showToast({
+ title: '请确认您的验光数据',
+ icon: 'none',
+ duration: 3000,
+ })
+ }
+ }
+ }
+ }
+ if (flag !== 0) {
+ // 如果数据验证无误，那么更新验光单的数据
+ store.dispatch('myLoveList/getLoveList', {
+ uid: this.$store.state.user.userInfo.uid,
+ })
+ let i = 0
+ // 判断出是哪一个sku被选中
+ for (let index = 0; index < this.current.length; index++) {
+ console.log('index', index, i, index !== this.current.length - 1)
+ if (index !== this.current.length - 1) {
+ // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
+ i = this.current[index] * this.attrList[1].attr.length
+ } else {
+ i += this.current[index]
+ }
+ }
+ // 判断是否其输入的人员数据是否已存在
+ store.dispatch('order/saveParams', {
+ sk_id_arr: this.skuList[i],
+ current: this.current,
+ mp_id: this.mp_id,
+ attrList: this.attrList,
+ })
+ // 跳转到确认订单页面
+ uni.navigateTo({
+ url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
+ })
+ }
+ },
+ }
+ }
+</script>
+
+<style lang="scss">
+ .content {
+ min-height: 100vh;
+ background-color: #f2f2f2;
+ // padding-top: 20rpx;
+ .goodInfo {
+ width: 100%;
+ height: 272rpx;
+ border-radius: 16rpx;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ padding: 36rpx;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ .imageWrap {
+ height: 188rpx;
+ width: 188rpx;
+ margin-right: 28rpx;
+ image {
+ height: 188rpx;
+ width: 188rpx;
+ }
+ }
+ .infoRight {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ .goodName {
+ font-size: 28rpx;
+ color: #333333;
+ }
+ .remarks {
+ font-size: 20rpx;
+ color: #999999;
+ }
+ .priceBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ font-size: 14px;
+ color: #999999;
+ .price {
+ color: #ff6b4a;
+ font-size: 28rpx;
+ }
+ .counter {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 28rpx;
+ color: #333333;
+ width: 122rpx;
+ .btn {
+ display: flex;
+ justify-content: center;
+ line-height: 32rpx;
+ height: 32rpx;
+ width: 32rpx;
+ background-color: #f2f2f2;
+ color: #cfcfcf;
+ }
+ }
+ }
+ }
+ }
+ .peopleChoose{
+ width: 100%;
+ min-height: 200rpx;
+ border-radius: 16rpx;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ padding: 36rpx;
+ margin: 10px 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ .title{
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin: 4px 0;
+ }
+ .loveList{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 24rpx;
+ width: 100%;
+ .peopleName {
+ padding: 0 30rpx;
+ height: 60rpx;
+ margin: 0 20rpx 20rpx 0;
+ transition: all 0.3s;
+ background: #f2f2f2;
+ border-radius: 2px;
+ border-radius: 2px;
+ line-height: 60rpx;
+ text-align: center;
+ color: #666666;
+ font-size: 12px;
+ }
+ .active2 {
+ background: rgba(255, 107, 74, 0.15);
+ color: #ff6b4a;
+ }
+ }
+ }
+ .goods-data {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 37rpx 40rpx 0 40rpx;
+ background: #ffffff;
+ border-radius: 12rpx;
+ .opCollapse {
+ width: 100%;
+ padding-bottom: 28rpx;
+ margin-top: 7px;
+ border-bottom: 1px solid #e9e9e9;
+ .head {
+ display: flex;
+ justify-content: space-between;
+ height: 24px;
+ // font-family: PingFangSC-Medium;
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin-bottom: 18rpx;
+ .headRighted {
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-bottom: 4px solid #cfcfcf;
+ transform: scaleY(-1);
+ margin-top: 10px;
+ }
+ .headMid {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-left: -120rpx;
+ }
+ .headRight {
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-bottom: 4px solid #cfcfcf;
+ margin-top: 10px;
+ }
+ }
+ .body {
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: 0;
+ .bodyBox {
+ margin-top: 15px;
+ .names {
+ font-size: 12px;
+ color: #151515;
+ letter-spacing: 0;
+ text-align: justify;
+ line-height: 17px;
+ margin-left: 5px;
+ margin-right: 10px;
+ }
+ text {
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: 0;
+ text-align: justify;
+ }
+ }
+ }
+ .goods-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ width: 100%;
+ padding: 40rpx 0;
+ .p1 {
+ font-size: 16px;
+ color: #333333;
+ letter-spacing: -0.3px;
+ text-align: justify;
+ line-height: 24px;
+ margin: 4px 0;
+
+ }
+ .p2 {
+ font-size: 12px;
+ color: #999999;
+ letter-spacing: -0.23px;
+ margin-bottom: 32rpx;
+ }
+ .image2{
+ width: 42rpx;
+ height: 34rpx;
+ margin-right: 12rpx;
+ }
+ .confirm {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #666666;
+ letter-spacing: -0.23px;
+ width: 684rpx;
+ .image1{
+ margin-right:25rpx;
+ width: 42rpx;
+ height: 38rpx;
+ }
+ }
+ .picker{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+
+ .picker-choice{
+ display: flex;
+ width: 684rpx;
+ align-items: center;
+ margin-bottom: 40rpx;
+ .input{
+ border-bottom: 1px solid #CFCFCF;
+ height: 40rpx;
+ }
+ .choice-left{
+ width: 210rpx;
+ .pd{
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: -0.26px;
+ text-align: justify;
+ line-height: 24px;
+ margin-right: 44rpx;
+ }
+ .p11 {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: -0.26px;
+ text-align: justify;
+ line-height: 24px;
+ // margin-right: 10px;
+ }
+ .p12 {
+ font-size: 10px;
+ color: #3F3F3F;
+ letter-spacing: -0.19px;
+ text-align: justify;
+ line-height: 24px;
+ }
+
+ }
+ .p13 {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-right: 10px;
+ }
+ .p13-date {
+ font-size: 10px;
+ color: #999999;
+ letter-spacing: -0.19px;
+ margin-right: 5px;
+ }
+ picker{
+ width: 144rpx;
+ height: 40rpx;
+ display: flex;
+ position: relative;
+ .p14 {
+ font-size: 14px;
+ color: #666666;
+ letter-spacing: -0.26px;
+ text-align: center;
+ width: 124rpx;
+ border-bottom: 1px solid #CFCFCF;
+ height: 38rpx;
+ }
+ image{
+ width: 20rpx;
+ height: 20rpx;
+ position: absolute;
+ right: 20rpx;
+ top: 8rpx;
+ }
+ }
+
+ }
+ }
+ }
+ }
+ }
+ .choose {
+ width: 100%;
+ background: #ffffff;
+ border-radius: 12rpx;
+ margin-top: 20rpx;
+ padding: 40rpx 40rpx 112rpx 40rpx;
+ box-sizing: border-box;
+ .chooseItem {
+ width: 100%;
+ padding-bottom: 32rpx;
+ border-bottom: 1px solid #e9e9e9;
+ margin-bottom: 28rpx;
+ }
+ .chooseRes {
+ font-size: 12px;
+ color: #666666;
+ }
+ .itemsWrap {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 24rpx;
+ .item1 {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 32rpx;
+ margin: 0 36rpx 24rpx 0;
+ transition: all 0.3s;
+ border: 1px solid #ffffff;
+ }
+ .item2 {
+ // width: 100rpx;
+ padding: 0 30rpx;
+ height: 60rpx;
+ margin: 0 20rpx 20rpx 0;
+ transition: all 0.3s;
+ background: #f2f2f2;
+ border-radius: 2px;
+ border-radius: 2px;
+ line-height: 60rpx;
+ text-align: center;
+ color: #666666;
+ font-size: 12px;
+ }
+ .active1 {
+ opacity: 0.7;
+ border: 1px solid #ff6b4a;
+ }
+ .active2 {
+ background: rgba(255, 107, 74, 0.15);
+ color: #ff6b4a;
+ }
+ }
+ }
+ .button {
+ width: 100%;
+ height: 112rpx;
+ background-color: #ff6b4a;
+ font-size: 16px;
+ color: #ffffff;
+ line-height: 112rpx;
+ text-align: center;
+ // position: absolute;
+ bottom: 0;
+ left: 0;
+ }
+ }
+ /* sheet弹窗 */
+ .sheet{
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 150%;
+ left: 0upx;
+ bottom: 0upx;
+ right: 0upx;
+ background:rgba(0,0,0,0.3);
+ z-index: 10000;
+ }
+
+ /* 显示时候的动画默认0.5s */
+ .sheetView{
+ width: 100%;
+ height: 0upx;
+ position: absolute;
+ bottom: 0upx;
+ background: white;
+ z-index: 10001;
+ transition: all 0.5s;
+ }
+ .sheetShow{
+ top:0upx !important;
+ }
+ /* 关闭时的动画，时间自己可以设置0.5s*/
+ .sheeHide{
+ top:120% !important;
+ transition: all 0.5s;
+ }
+
+ /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
+ .sheetView_active{
+ height: 942upx;
+ }
+
+</style>
diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue
index 58162d7..6fdb076 100644
--- a/src/pages/frameDetail/frameDetail.vue
+++ b/src/pages/frameDetail/frameDetail.vue
@@ -321,18 +321,25 @@
>加入购物车</view>
<view
class="botton_now"
- @tap="goPerchase()"
+
+ @click="showBottom()"
>立即购买</view>
</view>
- </view>
+ </view>
+ <BottomSheet v-if="isShowBottom" :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
</view>
</template>
<script>
-import store from '@/store'
-export default {
+import store from '@/store'
+import BottomSheet from './components/BottomSheet.vue';
+export default {
+ components:{
+ BottomSheet,
+ },
data () {
- return {
+ return {
+ isShowBottom : false, //底部弹窗开关
test: '',
goodType: 2,
pid: 0,
@@ -413,14 +420,21 @@ export default {
return this.goodType
},
goodInfo () {
- console.log(this.$store.state.read.goodInfo)
+ // console.log(this.$store.state.read.goodInfo)
return this.$store.state.read.goodInfo
},
cartNumber() {
return this.$store.state.cart.cartList.length || 0
},
},
- methods: {
+ methods: {
+ //底部弹窗开关
+ showBottom(){
+ this.isShowBottom = true;
+ },
+ closeBottom(){
+ this.isShowBottom = false;
+ },
// 前往购物车
toCart() {
uni.switchTab({
@@ -799,8 +813,8 @@ export default {
}
}
image {
- width: 60%;
- height: 30px;
+ width: 42%;
+ height: 26px;
}
.botton_image {
font-size: 12px;
@@ -830,5 +844,11 @@ export default {
color: #ffffff;
border-radius: 0 20px 20px 0;
}
-}
+}
+/* 隐藏滚动条 */
+ ::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ color: transparent;
+ }
</style>
diff --git a/src/pages/myOrder/components/OrderCard.vue b/src/pages/myOrder/components/OrderCard.vue
index e84f522..33f0232 100644
--- a/src/pages/myOrder/components/OrderCard.vue
+++ b/src/pages/myOrder/components/OrderCard.vue
@@ -45,7 +45,7 @@
<text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
</view>
- <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
+ <view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
<view class="infoText">
<view class="orderName">{{orderInfo.p_name}}</view>
@@ -64,7 +64,7 @@
<view class="btns" v-if="status == '1'">
<view class="btn-type2">确认收货</view>
</view>
- <view class="btns" v-if="status == '2'">
+ <view class="btns" v-if="status == '2'||status == '3'">
<view class="btn-type2">再次购买</view>
</view>
<!-- <view class="btns" v-if="status == '3'">
@@ -164,8 +164,8 @@
return this.order.status
},
orderInfoList(){
- console.log('this.order.order_info[0]', this.order)
- return this.order.order_info[0]
+ console.log('this.order.order_info', this.order)
+ return this.order.order_info
}
},
data() {
diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue
index 110cf91..043a9eb 100644
--- a/src/pages/myOrder/myOrder.vue
+++ b/src/pages/myOrder/myOrder.vue
@@ -67,7 +67,7 @@ export default {
},
computed: {
orderList() {
- // console.log('orderList', this.$store.state.myOrder.orderList);
+ console.log('orderList', this.$store.state.myOrder.orderList);
return this.$store.state.myOrder.orderList
},
},
diff --git a/src/pages/myOrderPaying/myOrderPaying.vue b/src/pages/myOrderPaying/myOrderPaying.vue
index 5cc99a5..8587216 100644
--- a/src/pages/myOrderPaying/myOrderPaying.vue
+++ b/src/pages/myOrderPaying/myOrderPaying.vue
@@ -80,13 +80,13 @@
</text>
<text class="order-info-price">
<text class="p1">实付</text>
- <text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>
+ <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
</text>
<text class="order-info-num">
<text>订单号：{{payId}}</text>
</text>
<text class="order-info-time">
- <text>下单时间：{{orderInfo.order_info[0].pay_time | timerChange}}</text>
+ <text>下单时间：{{orderInfo.order_info.pay_time | timerChange}}</text>
</text>
<view class="order-info-hr"></view>
<view class="order-info-contact">
@@ -140,11 +140,11 @@ export default {
isPay: 0,
}
},
- onLoad: function (option) {
- console.log(option)
- this.payId = option.payId
- this.status = option.status
- this.isPay = option.isPay
+ onLoad: function ({payId,state,isPay}) {
+ console.log('++++++++++++++++++',payId,state,isPay)
+ this.payId = payId
+ this.status = state
+ this.isPay = isPay
const openid = uni.getStorageSync('openid')
const uid = this.$store.state.user.uid
this.uid = uid
@@ -172,16 +172,16 @@ export default {
return this.$store.state.orderRead.orderInfo || {}
},
orderInfoList () {
- const orderInfoList = this.orderInfo.order_info[0].list
+ const orderInfoList = this.$store.state.orderRead.orderInfo.order_info.list
return orderInfoList
},
// 获取订单地址信息
orderAddressInfo () {
- return this.orderInfo.order_info[0].address
+ return this.orderInfo.order_info.address
},
// 订单付款时间
getTime () {
- return this.orderInfo.order_info[0].lefttime
+ return this.orderInfo.order_info.lefttime
},
// 计算总优惠额
totalDiscount () {
diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js
index 9650267..50b6412 100644
--- a/src/store/modules/cart.js
+++ b/src/store/modules/cart.js
@@ -36,12 +36,12 @@ const actions = {
console.log('cart===>接口数据', res.data.data)
commit('INIT', res.data.data)
},
- fail: (res) => {
- console.log('fail status === > ', res)
- },
- complete: (res) => {
- console.log('complete status === > ', res)
- },
+ // fail: (res) => {
+ // console.log('fail status === > ', res)
+ // },
+ // complete: (res) => {
+ // console.log('complete status === > ', res)
+ // },
})
},
// 修改购物车数量
diff --git a/src/store/modules/orderRead.js b/src/store/modules/orderRead.js
index eeaa8cd..095302d 100644
--- a/src/store/modules/orderRead.js
+++ b/src/store/modules/orderRead.js
@@ -21,7 +21,8 @@ const actions = {
url: orderRead,
data: param,
success: (res) => {
- commit("INIT", res.data.data)
+ commit("INIT", res.data.data)
+ console.log('res',res)
}
})
}
--
2.0.0