刘文博 / gulu-vue

Download as
Browse Code »

Commit 280fcb85bf08c0a7b835f7e60b3375db0601d6c2

Authored by 吉鹏
2 parents e40e790a30 3cda19af7e
Exists in master

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

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

1.54 KB
src/store/modules/details.js
Diff comments   View file @280fcb8
... ... @@ -0,0 +1,58 @@
  1 +import urlAlias from '../url'
  2 +import request from '../request'
  3 +
  4 +const {
  5 + read,
  6 +} = urlAlias
  7 +
  8 +const state = {
  9 + // 轮播图
  10 + carousel: [
  11 + '/static/img/detail/d9.png',
  12 + ],
  13 + // 商品基本信息
  14 + goodsInfo: {
  15 + name: '暂无名称',
  16 + price: '暂无价格',
  17 + discountPrice: undefined,
  18 + tradeNumber: undefined,
  19 + },
  20 +}
  21 +
  22 +const mutations = {
  23 + INIT: (state, { carousel, goodsInfo }) => {
  24 + state.carousel = carousel
  25 + state.goodsInfo = goodsInfo
  26 + },
  27 +}
  28 +
  29 +const actions = {
  30 + details({ commit }, param) {
  31 + return new Promise((resolve, reject) => request({
  32 + url: read,
  33 + data: param,
  34 + success: ({ data: { data } }) => {
  35 + commit('INIT', {
  36 + carousel: data.pics,
  37 + goodsInfo: {
  38 + name: data.p_name,
  39 + price: data.priceArea.Min_Price,
  40 + discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
  41 + tradeNumber: data.trade_num,
  42 + },
  43 + })
  44 + resolve(data)
  45 + },
  46 + fail: (res) => {
  47 + console.log('fail status ===>', res)
  48 + },
  49 + }))
  50 + },
  51 +}
  52 +
  53 +export default {
  54 + namespaced: true,
  55 + state,
  56 + mutations,
  57 + actions,
  58 +}
... ...
src/store/modules/read.js
Diff comments   View file @280fcb8
... ... @@ -2,57 +2,56 @@ import urlAlias from &#39;../url&#39;
2 2 import request from '../request'
3 3  
4 4 const {
5   - read
  5 + read,
6 6 } = urlAlias
7 7  
8 8 const state = {
9   - goodInfo: {}
  9 + goodInfo: {},
10 10 }
11 11  
12 12 const mutations = {
13 13 INIT: (state, goodInfo) => {
14 14 state.goodInfo = goodInfo
15   - }
  15 + },
16 16 }
17 17  
18 18 const actions = {
19 19 fetch({ commit }, param) {
20   - // 由于购物车和用户推荐的价格要根据sk_id来获取
21   - const arg=Object.assign({},param)
22   - delete param.sk_id
  20 + // 由于购物车和用户推荐的价格要根据sk_id来获取
  21 + const arg = Object.assign({}, param)
  22 + delete param.sk_id
23 23 return new Promise((resolve, reject) => request({
24 24 url: read,
25 25 data: param,
26 26 success: (res) => {
27   - console.log('readParm====>',arg)
28   - console.log('read====>',res.data.data)
29   - // 用一个新的对象来接收sk_id找的值
30   - const Res=Object.assign({},res.data.data)
31   - if(arg.sk_id!=undefined){
32   - for (let i = 0; i < res.data.data.skuList.length; i++) {
33   - if(res.data.data.skuList[i].sk_id==arg.sk_id){
34   - Res.p_sale_price= res.data.data.skuList[i].real_price
35   - console.log('陈工了')
36   - }
37   - }
38   - }
39   - console.log(Res)
  27 + console.log('readParm====>', arg)
  28 + console.log('read====>', res.data.data)
  29 + // 用一个新的对象来接收sk_id找的值
  30 + const Res = Object.assign({}, res.data.data)
  31 + if (arg.sk_id !== undefined) {
  32 + for (let i = 0; i < res.data.data.skuList.length; i++) {
  33 + if (res.data.data.skuList[i].sk_id === arg.sk_id) {
  34 + Res.p_sale_price = res.data.data.skuList[i].real_price
  35 + console.log('陈工了')
  36 + }
  37 + }
  38 + }
40 39 commit('INIT', Res)
41   - resolve()
  40 + resolve(res.data)
42 41 },
43 42 fail: (res) => {
44 43 console.log('fail status === > ', res)
45 44 },
46 45 complete: (res) => {
47 46 console.log('complete status === > ', res)
48   - }
  47 + },
49 48 }))
50   - }
  49 + },
51 50 }
52 51  
53 52 export default {
54 53 namespaced: true,
55 54 state,
56 55 mutations,
57   - actions
  56 + actions,
58 57 }
... ...