Adam / gulu-vue

Download as
Browse Code »

Commit 6cba5813014536e20ad36b59e87802a40b2c29b6

Authored by BigBoss
2 parents 15af636b40 280fcb85bf
Exists in master

修改冲突

Showing 16 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @6cba581
... ... @@ -77,7 +77,7 @@ image {
77 77 }
78 78 .name {
79 79 width: 92%;
80   - height: 54rpx;
  80 + height: 56rpx;
81 81 padding: 5px 4%;
82 82 display: -webkit-box;
83 83 -webkit-box-orient: vertical;
... ...
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @6cba581
... ... @@ -12,7 +12,7 @@
12 12 <view
13 13 class="first-menu"
14 14 :class="{'on':showPage==index || on[index] === 1}"
15   - @tap="togglePage(index)"
  15 + @tap="togglePage(index, false)"
16 16 v-if="!item.isNoPull"
17 17 >
18 18 <text class="name">{{item.name}}</text>
... ... @@ -372,14 +372,14 @@ export default {
372 372 this.$forceUpdate()
373 373 },
374 374 // 菜单开关
375   - togglePage (index) {
  375 + togglePage (index, isRequest = true) {
376 376 if (index === this.showPage) {
377   - this.hidePageLayer(true)
  377 + this.hidePageLayer(true, isRequest)
378 378 this.hideMask()
379 379 this.showPage = -1
380 380 } else {
381 381 if (this.showPage > -1) {
382   - this.hidePageLayer(false)
  382 + this.hidePageLayer(false, isRequest)
383 383 }
384 384 this.showPageLayer(index)
385 385 this.showMask()
... ... @@ -416,14 +416,17 @@ export default {
416 416 })
417 417 },
418 418 // hide菜单页
419   - hidePageLayer (isAnimation) {
  419 + hidePageLayer (isAnimation,isRequset = true) {
420 420 this.triangleDeg[this.showPage] = 0
421 421 const tmpIndex = this.showPage
422 422 if (isAnimation) {
423 423 setTimeout(() => {
424 424 this.pageState.splice(tmpIndex, 1, false)
425   - }, 200)
426   - this.confirm()
  425 + }, 200)
  426 + // debugger
  427 + if(isRequset){
  428 + this.confirm()
  429 + }
427 430 } else {
428 431 this.pageState.splice(tmpIndex, 1, false)
429 432 }
... ... @@ -812,20 +815,21 @@ export default {
812 815 }
813 816 .labels {
814 817 flex-direction: row;
815   - flex-wrap: wrap;
  818 + flex-wrap: wrap;
  819 + justify-content: space-between;
816 820 .on {
817 821 border-color: #ff6b4a;
818 822 background-color: #ff6b4a;
819 823 color: #fff;
820 824 }
821 825 > view {
822   - width: 148rpx;
  826 + width: 220rpx;
823 827 height: 30px;
824 828 border: solid 1rpx #adadad;
825 829 border-radius: 2px;
826   - margin-right: 15px;
  830 + margin-right: 2px;
827 831 margin-top: 8px;
828   - padding: 0 16rpx;
  832 + padding: 0 10rpx;
829 833 box-sizing: border-box;
830 834 font-size: 12px;
831 835 flex-direction: row;
... ...
src/components/sl-filter/filter-view.vue
Diff comments   View file @6cba581
... ... @@ -0,0 +1,475 @@
  1 +<template>
  2 +
  3 + <view>
  4 + <view style="padding: 0px 0px;">
  5 + <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
  6 + <view v-if="item.isSort">
  7 + <view class="filter-content-list">
  8 + <view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
  9 + :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
  10 + <text>{{detailItem.title}}</text>
  11 + </view>
  12 + </view>
  13 + </view>
  14 + <view v-else>
  15 + <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
  16 + <text>{{item.detailTitle}}</text>
  17 + </view>
  18 + <view class="filter-content-detail">
  19 + <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
  20 + @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
  21 + {{detailItem.title}}
  22 + </text>
  23 + </view>
  24 + <view class="filter-content-footer">
  25 + <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)">
  26 + <text>重置</text>
  27 + </view>
  28 + <view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
  29 + <text>确定</text>
  30 + </view>
  31 + </view>
  32 + </view>
  33 + </view>
  34 + </view>
  35 + </view>
  36 +
  37 +</template>
  38 +
  39 +<script>
  40 + export default {
  41 + data() {
  42 + return {
  43 + selectArr: [],
  44 + result: {},
  45 + menuIndex: 0,
  46 + selectDetailList: [],
  47 + independenceObj: {},
  48 + selectedKey: '',
  49 + cacheSelectedObj: {},
  50 + defaultSelectedTitleObj: {}
  51 + };
  52 + },
  53 + props: {
  54 + themeColor: {
  55 + type: String,
  56 + default () {
  57 + return '#D1372C'
  58 + }
  59 + },
  60 + menuList: {
  61 + type: Array,
  62 + default () {
  63 + return []
  64 + }
  65 + },
  66 + independence: {
  67 + type: Boolean,
  68 + default: false
  69 + }
  70 + },
  71 + computed: {
  72 + selectedTitleObj() {
  73 + let obj = {}
  74 + for (let i = 0; i < this.menuList.length; i++) {
  75 + let item = this.menuList[i];
  76 + obj[item.key] = item.title;
  77 + }
  78 + return obj;
  79 + },
  80 + defaultSelectedObj() { // 保存初始状态
  81 + return this.getSelectedObj()
  82 + },
  83 + selectedObj: {
  84 + get() {
  85 + return this.getSelectedObj()
  86 + },
  87 + set(newObj) {
  88 + return newObj;
  89 + }
  90 +
  91 + }
  92 + },
  93 + methods: {
  94 + getSelectedObj() {
  95 + let obj = {}
  96 + for (let i = 0; i < this.menuList.length; i++) {
  97 + let item = this.menuList[i];
  98 + if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
  99 +
  100 + if (item.isMutiple) {
  101 + obj[item.key] = [];
  102 + item.detailList[0].isSelected = false;
  103 + if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
  104 + item.defaultSelectedIndex = [item.defaultSelectedIndex];
  105 + }
  106 + for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
  107 + item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
  108 + obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
  109 + }
  110 +
  111 + } else {
  112 + obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
  113 + this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
  114 + this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
  115 + item.detailList[0].isSelected = false;
  116 + item.detailList[item.defaultSelectedIndex].isSelected = true;
  117 + }
  118 + } else {
  119 + if (item.isMutiple) {
  120 + obj[item.key] = [];
  121 + } else {
  122 + obj[item.key] = '';
  123 + }
  124 + }
  125 + }
  126 + this.result = obj;
  127 + return obj;
  128 + },
  129 + // 重置所有选项，包括默认选项，并更新result
  130 + resetAllSelect(callback) {
  131 + let titles = [];
  132 + for (let i = 0; i < this.menuList.length; i++) {
  133 + this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
  134 + titles[this.menuList[i].key] = this.menuList[i].title;
  135 + }
  136 + let obj = {
  137 + 'result': this.result,
  138 + 'titles': titles,
  139 + 'isReset': true
  140 + }
  141 + this.$emit("confirm", obj);
  142 + callback(this.result);
  143 + },
  144 + // 重置选项为设置的默认值，并更新result
  145 + resetSelectToDefault(callback) {
  146 + for (let i = 0; i < this.menuList.length; i++) {
  147 + this.selectDetailList = this.menuList[i].detailList;
  148 +
  149 + if (this.menuList[i].defaultSelectedIndex) {
  150 + if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
  151 + for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
  152 + if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
  153 + this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
  154 + .menuList[i].key)
  155 + }
  156 + }
  157 + } else {
  158 + this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
  159 + i].key)
  160 + }
  161 +
  162 + // 获取非默认项的下标
  163 + let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
  164 + // 把所有不是默认的为true的点为false
  165 + for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
  166 + if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
  167 + this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
  168 + .menuList[i].key)
  169 + }
  170 + }
  171 + }
  172 +
  173 +
  174 + }
  175 +
  176 + this.selectedObj = this.defaultSelectedObj;
  177 + this.result = this.defaultSelectedObj;
  178 + let obj = {
  179 + 'result': this.result,
  180 + 'titles': this.defaultSelectedTitleObj,
  181 + 'isReset': true
  182 + }
  183 + this.$emit("confirm", obj);
  184 + callback(this.result)
  185 + },
  186 + getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
  187 + let tempDefault = menuListItem.defaultSelectedIndex;
  188 + if (!Array.isArray(tempDefault)) {
  189 + tempDefault = [tempDefault];
  190 + }
  191 + // 获取所有项的下标 组成新的数组
  192 + let all = [];
  193 + for (let i = 0; i < menuListItem.detailList.length; i++) {
  194 + all.push(i)
  195 + }
  196 + // 将默认选中的数组与所有项的数组的不同值合并为一个新数组
  197 + var unDefaultSelectedIndex = tempDefault.filter(function(v) {
  198 + return !(all.indexOf(v) > -1)
  199 + }).concat(all.filter(function(v) {
  200 + return !(tempDefault.indexOf(v) > -1)
  201 + }));
  202 + return unDefaultSelectedIndex;
  203 + },
  204 + resetMenuList(val) {
  205 + this.menuList = val;
  206 + this.$emit('update:menuList', val)
  207 + },
  208 + menuTabClick(index) {
  209 + this.menuIndex = index;
  210 + this.selectDetailList = this.menuList[index].detailList;
  211 + this.selectedKey = this.menuList[index].key;
  212 + // 如果是独立菜单
  213 + if (this.independence && !this.menuList[index].isSort) {
  214 + if (JSON.stringify(this.independenceObj) == '{}') {
  215 + this.initIndependenceObj(index);
  216 + } else {
  217 + for (let key in this.independenceObj) {
  218 + if (key != this.selectedKey) {
  219 + this.initIndependenceObj(index);
  220 + this.resetSelected(this.menuList[index].detailList, this.selectedKey);
  221 + }
  222 + }
  223 + }
  224 +
  225 + }
  226 + if (this.independence && this.menuList[index].isSort) {
  227 +
  228 + this.independenceObj = {};
  229 +
  230 +
  231 + }
  232 + if (this.independence) {
  233 + let idx = this.menuList[index].defaultSelectedIndex;
  234 + if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
  235 + if (this.menuList[index].isMutiple) {
  236 + for (let i = 0; i < idx.length; i++) {
  237 + if (this.menuList[index].detailList[idx[i]].isSelected == false) {
  238 + this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
  239 + }
  240 +
  241 + }
  242 + } else {
  243 + if (this.menuList[index].detailList[idx].isSelected == false) {
  244 +
  245 + this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
  246 +
  247 + }
  248 + }
  249 +
  250 + }
  251 + }
  252 +
  253 +
  254 + // #ifdef H5
  255 + this.selectedObj = this.selectedObj;
  256 + this.$forceUpdate();
  257 + // #endif
  258 + },
  259 + initIndependenceObj(index) {
  260 + this.independenceObj = {};
  261 + if (this.menuList[index].isMutiple) {
  262 + this.independenceObj[this.selectedKey] = [];
  263 + } else {
  264 + this.independenceObj[this.selectedKey] = '';
  265 + }
  266 + },
  267 + itemTap(index, list, isMutiple, key) {
  268 + if (isMutiple == true) {
  269 + list[index].isSelected = !list[index].isSelected;
  270 + if (index == 0) {
  271 + this.resetSelected(list, key)
  272 + if (!this.independence) {
  273 + this.selectedTitleObj[key] = list[index].title;
  274 + }
  275 + } else {
  276 + list[0].isSelected = false
  277 + if (list[index].isSelected) {
  278 + if (this.independence) {
  279 + this.independenceObj[this.selectedKey].push(list[index].value);
  280 + } else {
  281 + this.selectedObj[key].push(list[index].value);
  282 + }
  283 + } else {
  284 + list[index].isSelected = false;
  285 + if (this.independence) {
  286 + var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
  287 + this.independenceObj[this.selectedKey].splice(idx, 1);
  288 + } else {
  289 + var idx = this.selectedObj[key].indexOf(list[index].value);
  290 + this.selectedObj[key].splice(idx, 1);
  291 + }
  292 +
  293 + }
  294 + if (this.independence) {
  295 + this.result = this.independenceObj;
  296 + } else {
  297 + this.result = this.selectedObj;
  298 + }
  299 +
  300 + }
  301 + } else {
  302 + if (index == 0) {
  303 + this.resetSelected(list, key)
  304 + if (!this.independence) {
  305 + this.selectedTitleObj[key] = list[index].title;
  306 + }
  307 + } else {
  308 + list[0].isSelected = false
  309 + if (this.independence) {
  310 + this.independenceObj[this.selectedKey] = list[index].value;
  311 + this.result = this.independenceObj;
  312 + } else {
  313 + this.selectedObj[key] = list[index].value;
  314 + this.result = this.selectedObj;
  315 + this.selectedTitleObj[key] = list[index].title;
  316 + }
  317 +
  318 + for (let i = 0; i < list.length; i++) {
  319 + if (index == i) {
  320 + list[i].isSelected = true
  321 + } else {
  322 + list[i].isSelected = false
  323 + }
  324 + }
  325 + }
  326 + }
  327 + // #ifdef H5
  328 + this.$forceUpdate();
  329 + // #endif
  330 + },
  331 + resetSelected(list, key) {
  332 + if (typeof this.result[key] == 'object') {
  333 + this.result[key] = [];
  334 + this.selectedTitleObj[key] = list[0].title;
  335 + } else {
  336 + this.result[key] = '';
  337 + this.selectedTitleObj[key] = list[0].title;
  338 + }
  339 + for (let i = 0; i < list.length; i++) {
  340 + if (i == 0) {
  341 + list[i].isSelected = true;
  342 + } else {
  343 + list[i].isSelected = false;
  344 + }
  345 + }
  346 + // #ifdef H5
  347 + this.$forceUpdate();
  348 + // #endif
  349 + },
  350 + sortTap(index, list, key) {
  351 + if (this.independence) {
  352 + this.independenceObj[this.selectedKey] = list[index].value;
  353 + this.result = this.independenceObj;
  354 + } else {
  355 + this.selectedObj[key] = list[index].value;
  356 + this.result = this.selectedObj;
  357 + this.selectedTitleObj[key] = list[index].title;
  358 + }
  359 +
  360 + for (let i = 0; i < list.length; i++) {
  361 + if (index == i) {
  362 + list[i].isSelected = true;
  363 + } else {
  364 + list[i].isSelected = false;
  365 + }
  366 + }
  367 + let obj = {
  368 + 'result': this.result,
  369 + 'titles': this.selectedTitleObj,
  370 + 'isReset': false
  371 + }
  372 + this.$emit("confirm", obj);
  373 + },
  374 + sureClick() {
  375 + let obj = {
  376 + 'result': this.result,
  377 + 'titles': this.selectedTitleObj,
  378 + 'isReset': false
  379 + }
  380 + this.$emit("confirm", obj);
  381 + },
  382 + resetClick(list, key) {
  383 + this.resetSelected(list, key)
  384 + }
  385 + }
  386 + }
  387 +</script>
  388 +
  389 +<style>
  390 + .filter-content {
  391 + background-color: #F6F7F8;
  392 + }
  393 +
  394 + .filter-content-title {
  395 + border-bottom: #EEEEEE 1px solid;
  396 + padding: 10px 15px;
  397 + font-size: 13px;
  398 + color: #999999;
  399 + }
  400 +
  401 + .filter-content-detail {
  402 + padding: 5px 15px;
  403 + }
  404 +
  405 + .filter-content-detail-item-active {
  406 + background-color: #D1372C;
  407 + color: #FFFFFF;
  408 + padding: 5px 15px;
  409 + border-radius: 20px;
  410 + margin-right: 10px;
  411 + margin-top: 10px;
  412 + display: inline-block;
  413 + font-size: 14px;
  414 + }
  415 +
  416 + .filter-content-detail-item-default {
  417 + background-color: #FFFFFF;
  418 + color: #666666;
  419 + padding: 5px 15px;
  420 + border-radius: 20px;
  421 + margin-right: 10px;
  422 + margin-top: 10px;
  423 + display: inline-block;
  424 + font-size: 14px;
  425 + }
  426 +
  427 + .filter-content-footer {
  428 + display: flex;
  429 + justify-content: space-between;
  430 + width: 100%;
  431 + height: 45px;
  432 + margin-top: 10px;
  433 + }
  434 +
  435 + .filter-content-footer-item {
  436 + width: 50%;
  437 + display: flex;
  438 + justify-content: center;
  439 + align-items: center;
  440 + font-size: 16px;
  441 + }
  442 +
  443 + .filter-content-list {
  444 +
  445 + padding: 5px 15px;
  446 + }
  447 +
  448 + .filter-content-list-item-default {
  449 + color: #666666;
  450 + width: 100%;
  451 + padding: 10px 0px;
  452 + }
  453 +
  454 + .filter-content-list-item-default text {
  455 + width: 90%;
  456 + font-size: 14px;
  457 + display: inline-block;
  458 + }
  459 +
  460 + .filter-content-list-item-active {
  461 + color: #D1372C;
  462 + width: 100%;
  463 + padding: 10px 0px;
  464 + }
  465 +
  466 + .filter-content-list-item-active text {
  467 + font-size: 14px;
  468 + width: 90%;
  469 + display: inline-block;
  470 + }
  471 +
  472 + .filter-content-list-item-active:after {
  473 + content: '✓';
  474 + }
  475 +</style>
... ...
src/components/sl-filter/iconfont/iconfont.css
Diff comments   View file @6cba581
... ... @@ -0,0 +1,20 @@
  1 +@font-face {
  2 + font-family: 'sl-font';
  3 + src: url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8kEgOAAABfAAAAFZjbWFwZO3RAgAAAeAAAAGGZ2x5Zh0ZI/EAAANwAAAAyGhlYWQVZkUXAAAA4AAAADZoaGVhB94DhAAAALwAAAAkaG10eAwAAAAAAAHUAAAADGxvY2EAMgBkAAADaAAAAAhtYXhwAREAKAAAARgAAAAgbmFtZT5U/n0AAAQ4AAACbXBvc3TohGjqAAAGqAAAADMAAQAAA4D/gABcBAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAMAAQAAAAEAANxW6kVfDzz1AAsEAAAAAADZJADbAAAAANkkANsAAAAABAACZAAAAAgAAgAAAAAAAAABAAAAAwAcAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5hrmHAOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAABQAAAAMAAAAsAAAABAAAAV4AAQAAAAAAWAADAAEAAAAsAAMACgAAAV4ABAAsAAAABgAEAAEAAuYa5hz//wAA5hrmHP//AAAAAAABAAYABgAAAAEAAgAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAKAAAAAAAAAACAADmGgAA5hoAAAABAADmHAAA5hwAAAACAAAAAAAAADIAZAAEAAAAAAOlAmQAEwAWABkAGgAAEwEWMjcBNjIWFAcBBiInASY0NjIBMDEVMDEnmQFgAgoDAV8LHRUK/n8LHAv+fwoVHQFoAQJZ/qEDAwFfCxYcC/6ACwsBgAsdFf6bAgQAAAAABAAAAAADpAJkABMAFgAZABsAACUBJiIHAQYiJjQ3ATYyFwEWFAYiATAxNTAxFzEDZ/6hAwoD/qELHRUKAYELHAsBgQoVHf6YAacBXwMD/qELFhwLAYEKCv5/CxwWAWUCBAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAEZG93bgJ1cAAAAA==') format('truetype');
  4 +}
  5 +
  6 +.sl-font {
  7 + font-family: "sl-font" !important;
  8 + font-size: 16px;
  9 + font-style: normal;
  10 + -webkit-font-smoothing: antialiased;
  11 + -moz-osx-font-smoothing: grayscale;
  12 +}
  13 +
  14 +.sl-down:before {
  15 + content: "\e61a";
  16 +}
  17 +
  18 +.sl-up:before {
  19 + content: "\e61c";
  20 +}
... ...
src/components/sl-filter/popup-layer.vue
Diff comments   View file @6cba581
... ... @@ -0,0 +1,122 @@
  1 +<template>
  2 + <scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
  3 + <view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
  4 + <slot></slot>
  5 + </view>
  6 + </scroll-view>
  7 +</template>
  8 +
  9 +<script>
  10 + export default {
  11 + name: 'popup-layer',
  12 + props: {
  13 + direction: {
  14 + type: String,
  15 + default: 'top', // 方向 top，bottom，left，right
  16 + },
  17 + autoClose: {
  18 + type: Boolean,
  19 + default: true,
  20 + },
  21 + isTransNav: {
  22 + type: Boolean,
  23 + default: false
  24 + },
  25 + navHeight: {
  26 + type: Number,
  27 + default: 0
  28 + }
  29 + },
  30 + data() {
  31 + return {
  32 + ifshow: false, // 是否展示,
  33 + translateValue: -100, // 位移距离
  34 + timer: null,
  35 + iftoggle: false,
  36 + };
  37 + },
  38 + computed: {
  39 + _translate() {
  40 + if (this.isTransNav) {
  41 + const transformObj = {
  42 + 'top': `transform:translateY(${-this.translateValue}%)`,
  43 + 'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
  44 + 'left': `transform:translateX(${-this.translateValue}%)`,
  45 + 'right': `transform:translateX(${this.translateValue}%)`
  46 + };
  47 + return transformObj[this.direction]
  48 + } else {
  49 + const transformObj = {
  50 + 'top': `transform:translateY(${-this.translateValue}%)`,
  51 + 'bottom': `transform:translateY(${this.translateValue}%)`,
  52 + 'left': `transform:translateX(${-this.translateValue}%)`,
  53 + 'right': `transform:translateX(${this.translateValue}%)`
  54 + };
  55 + return transformObj[this.direction]
  56 + }
  57 +
  58 + },
  59 + _location() {
  60 + const positionValue = {
  61 + 'top': 'bottom:0px;width:100%;',
  62 + 'bottom': 'top:0px;width:100%;',
  63 + 'left': 'right:0px;height:100%;',
  64 + 'right': 'left:0px;height:100%;',
  65 + };
  66 + return positionValue[this.direction] + this._translate;
  67 + }
  68 + },
  69 + methods: {
  70 + show() {
  71 + let _this = this;
  72 + this.ifshow = true;
  73 + let _open = setTimeout(() => {
  74 + this.translateValue = 0;
  75 + _open = null;
  76 + }, 100)
  77 + let _toggle = setTimeout(() => {
  78 + this.iftoggle = true;
  79 + _toggle = null;
  80 + }, 300);
  81 + },
  82 + close() {
  83 + if (this.timer !== null || !this.iftoggle) {
  84 + return;
  85 + }
  86 + this.translateValue = -100 - this.navHeight;
  87 +
  88 + this.timer = setTimeout(() => {
  89 + this.ifshow = false;
  90 + this.timer = null;
  91 + this.iftoggle = false;
  92 + }, 300);
  93 + this.$emit("close")
  94 + },
  95 + ableClose() {
  96 + if (this.autoClose) {
  97 + this.close();
  98 + }
  99 + },
  100 + stopEvent(event) {},
  101 + }
  102 + }
  103 +</script>
  104 +
  105 +<style>
  106 + .popup-layer {
  107 + position: absolute;
  108 + z-index: 999999;
  109 + background: rgba(0, 0, 0, .3);
  110 + height: calc(100% - 50px);
  111 + width: 100%;
  112 + left: 0px;
  113 + overflow: hidden;
  114 + }
  115 +
  116 + .popup-content {
  117 + position: absolute;
  118 + z-index: 1000000;
  119 + background: #FFFFFF;
  120 + transition: all .3s ease;
  121 + }
  122 +</style>
... ...
src/components/sl-filter/sl-filter.vue
Diff comments   View file @6cba581
... ... @@ -0,0 +1,317 @@
  1 +<template>
  2 + <view class="content">
  3 + <view :style="{height: tabHeight + 1 +'px'}">
  4 + <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
  5 + <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
  6 + <text :style="{color:color}">{{item.title}}</text>
  7 + <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
  8 + </view>
  9 + </view>
  10 + </view>
  11 + <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
  12 + :tabHeight="tabHeight">
  13 + <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
  14 + ref="slFilterView" @confirm="filterResult"></sl-filter-view>
  15 + </popup-layer>
  16 + </view>
  17 +
  18 +</template>
  19 +
  20 +<script>
  21 + import popupLayer from '@/components/sl-filter/popup-layer.vue';
  22 + import slFilterView from '@/components/sl-filter/filter-view.vue';
  23 + export default {
  24 + components: {
  25 + popupLayer,
  26 + slFilterView
  27 + },
  28 + props: {
  29 + menuList: {
  30 + type: Array,
  31 + default () {
  32 + return []
  33 + }
  34 + },
  35 + themeColor: {
  36 + type: String,
  37 + default () {
  38 + return '#000000'
  39 + }
  40 + },
  41 + color: {
  42 + type: String,
  43 + default () {
  44 + return '#666666'
  45 + }
  46 + },
  47 + independence: {
  48 + type: Boolean,
  49 + default: false
  50 + },
  51 + isTransNav: {
  52 + type: Boolean,
  53 + default: false
  54 + },
  55 + navHeight: {
  56 + type: Number,
  57 + default: 0
  58 + },
  59 + topFixed: {
  60 + type: Boolean,
  61 + default: false
  62 + }
  63 + },
  64 +
  65 + computed: {
  66 + itemWidth() {
  67 + return 'calc(100%/2)'
  68 + },
  69 + menuListTemp: {
  70 + get() {
  71 + return this.getMenuListTemp();
  72 + },
  73 + set(newObj) {
  74 + return newObj;
  75 + }
  76 + }
  77 + },
  78 + // #ifndef H5
  79 + onReady: function() {
  80 + let arr = [];
  81 + let titleArr = [];
  82 + let r = {};
  83 + for (let i = 0; i < this.menuList.length; i++) {
  84 + arr.push({
  85 + 'isActive': false
  86 + });
  87 + // titleArr.push({
  88 + // 'title': this.menuList[i].title,
  89 + // 'key': this.menuList[i].key
  90 + // })
  91 +
  92 + r[this.menuList[i].key] = this.menuList[i].title;
  93 +
  94 + if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
  95 + titleArr.push({
  96 + 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
  97 + 'key': this.menuList[i].key
  98 + })
  99 + } else {
  100 + titleArr.push({
  101 + 'title': this.menuList[i].title,
  102 + 'key': this.menuList[i].key
  103 + })
  104 + }
  105 +
  106 + }
  107 + this.statusList = arr;
  108 + this.titleList = titleArr;
  109 + this.tempTitleObj = r;
  110 + },
  111 + // #endif
  112 +
  113 + // #ifdef H5
  114 + created: function() {
  115 + let arr = [];
  116 + let titleArr = [];
  117 + let r = {};
  118 + for (let i = 0; i < this.menuList.length; i++) {
  119 + arr.push({
  120 + 'isActive': false
  121 + });
  122 + // titleArr.push({
  123 + // 'title': this.menuList[i].title,
  124 + // 'key': this.menuList[i].key
  125 + // });
  126 + r[this.menuList[i].key] = this.menuList[i].title;
  127 +
  128 + if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
  129 + titleArr.push({
  130 + 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
  131 + 'key': this.menuList[i].key
  132 + })
  133 + } else {
  134 + titleArr.push({
  135 + 'title': this.menuList[i].title,
  136 + 'key': this.menuList[i].key
  137 + })
  138 + }
  139 +
  140 + }
  141 + this.statusList = arr;
  142 + this.titleList = titleArr;
  143 + this.tempTitleObj = r;
  144 + },
  145 + // #endif
  146 + data() {
  147 + return {
  148 + down: 'sl-down',
  149 + up: 'sl-up',
  150 + tabHeight: 50,
  151 + statusList: [],
  152 + selectedIndex: '',
  153 + titleList: [],
  154 + tempTitleObj: {}
  155 + };
  156 + },
  157 + methods: {
  158 + getMenuListTemp() {
  159 + let arr = this.menuList;
  160 + for (let i = 0; i < arr.length; i++) {
  161 + let item = arr[i];
  162 + for (let j = 0; j < item.detailList.length; j++) {
  163 + let d_item = item.detailList[j];
  164 + if (j == 0) {
  165 + d_item.isSelected = true
  166 + } else {
  167 + d_item.isSelected = false
  168 + }
  169 + }
  170 + }
  171 + return arr;
  172 + },
  173 + // 重置所有选项，包括默认选项，并更新result
  174 + resetAllSelect(callback) {
  175 + this.$refs.slFilterView.resetAllSelect(function(e){
  176 + callback(e);
  177 + });
  178 + },
  179 + // 重置选项为设置的默认值，并更新result
  180 + resetSelectToDefault(callback) {
  181 + this.$refs.slFilterView.resetSelectToDefault(function(e){
  182 + callback(e);
  183 + });
  184 + },
  185 + resetMenuList(val) {
  186 + this.menuList = val;
  187 + this.$emit('update:menuList', val)
  188 + this.$forceUpdate();
  189 + this.$refs.slFilterView.resetMenuList(val)
  190 + },
  191 + showMenuClick(index) {
  192 + this.selectedIndex = index;
  193 + if (this.statusList[index].isActive == true) {
  194 + this.$refs.popupRef.close();
  195 + this.statusList[index].isActive = false
  196 + } else {
  197 + this.menuTabClick(index);
  198 + this.$refs.popupRef.show()
  199 + }
  200 + },
  201 + menuTabClick(index) {
  202 + this.$refs.slFilterView.menuTabClick(index);
  203 + for (let i = 0; i < this.statusList.length; i++) {
  204 + if (index == i) {
  205 + this.statusList[i].isActive = true;
  206 + } else {
  207 + this.statusList[i].isActive = false;
  208 + }
  209 + }
  210 + },
  211 + filterResult(obj) {
  212 + let val = obj.result;
  213 + let titlesObj = obj.titles;
  214 + // 处理选项映射到菜单title
  215 + if (this.independence) {
  216 + if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
  217 + let tempTitle = '';
  218 + for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
  219 + let item = this.menuList[this.selectedIndex].detailList[i];
  220 + if (item.value == val[this.menuList[this.selectedIndex].key]) {
  221 + tempTitle = item.title;
  222 + }
  223 + }
  224 + if (this.menuList[this.selectedIndex].reflexTitle) {
  225 + this.titleList[this.selectedIndex].title = tempTitle;
  226 + }
  227 + }
  228 + } else {
  229 + for (let key in titlesObj) {
  230 + if (!Array.isArray(titlesObj[key])) {
  231 + this.tempTitleObj[key] = titlesObj[key];
  232 + }
  233 +
  234 + }
  235 + for (let key in this.tempTitleObj) {
  236 + for (let i = 0; i < this.titleList.length; i++) {
  237 + if (this.titleList[i].key == key) {
  238 + this.titleList[i].title = this.tempTitleObj[key];
  239 + }
  240 + }
  241 + }
  242 + }
  243 +
  244 + this.$refs.popupRef.close()
  245 + if (obj.isReset) {
  246 +
  247 + } else{
  248 + this.$emit("result", val)
  249 + }
  250 +
  251 +
  252 + },
  253 + close() {
  254 + for (let i = 0; i < this.statusList.length; i++) {
  255 + this.statusList[i].isActive = false;
  256 + }
  257 + }
  258 + }
  259 + }
  260 +</script>
  261 +
  262 +<style lang="scss">
  263 + @import 'iconfont/iconfont.css';
  264 + // .content{
  265 + // flex-shrink: 0;
  266 + // width: 100%;
  267 + // height: 44px;
  268 + // position: fixed;
  269 + // z-index: 997;
  270 + // flex-wrap: nowrap;
  271 + // display: flex;
  272 + // flex-direction: row;
  273 + // // top: var(--window-top);
  274 + // left: 0;
  275 + // view {
  276 + // display: flex;
  277 + // flex-wrap: nowrap;
  278 + // }
  279 + // }
  280 + .select-tab {
  281 + border-bottom: #F7F7F7 1px solid;
  282 + background-color: #FFFFFF;
  283 + display: flex;
  284 + width: 100%;
  285 + }
  286 +
  287 + .select-tab-fixed-top {
  288 + border-bottom: #F7F7F7 1px solid;
  289 + background-color: #FFFFFF;
  290 + display: flex;
  291 + width: 100%;
  292 + position: fixed;
  293 + /* #ifdef H5 */
  294 + top: 44px;
  295 + /* #endif */
  296 + /* #ifndef H5 */
  297 + top: 0;
  298 + /* #endif */
  299 + }
  300 +
  301 + .arrows {
  302 + margin-left: 5px;
  303 + }
  304 +
  305 + .select-tab .select-tab-item,
  306 + .select-tab-fixed-top .select-tab-item {
  307 + display: flex;
  308 + justify-content: center;
  309 + align-items: center;
  310 + }
  311 +
  312 + .select-tab .select-tab-item text,
  313 + .select-tab-fixed-top .select-tab-item text {
  314 + color: #666666;
  315 + font-size: 14px;
  316 + }
  317 +</style>
... ...
... ... @@ -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 @6cba581
... ... @@ -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 @6cba581
... ... @@ -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 @6cba581
... ... @@ -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 @6cba581
... ... @@ -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/pages/index/index.vue
Diff comments   View file @6cba581
... ... @@ -106,8 +106,8 @@
106 106 </view>
107 107 </view>
108 108 <view class="loading-text">
109   - <text>{{loadedText}}</text>
110   - <!-- <text v-else>{{loadedText}}</text> -->
  109 + <text v-if="isLoading==true">{{loadingText}}</text>
  110 + <text v-else>{{loadedText}}</text>
111 111 </view>
112 112 </view>
113 113 <!-- </scroll-view> -->
... ... @@ -140,7 +140,7 @@ export default {
140 140 valueArr: "",
141 141 isLoading: true, //初始化加载状态
142 142 loadingText: "data loading...",
143   - loadedText: "~~到底啦~~",
  143 + loadedText: "~~暂无更多数据~~",
144 144 filterDropdownValue: [],
145 145 filterData: [],
146 146 searchText: "",
... ... @@ -158,7 +158,12 @@ export default {
158 158 goodsList() {
159 159 // 也可以从 getters 获取
160 160 // console.log('index-list=====>',this.$store.state.index.list)
161   - return this.$store.state.index.list;
  161 + let list = this.$store.state.index.list;
  162 + if(list.length == 0){
  163 + this.isLoading = false;
  164 + }
  165 + this.scrollTop = 0.1;
  166 + return list
162 167 },
163 168 categoryList() {
164 169 return this.$store.state.index.categoryList;
... ... @@ -260,7 +265,6 @@ export default {
260 265 flex-direction: column;
261 266 align-items: center;
262 267 justify-content: center;
263   - background-color: #f7f6f6;
264 268 }
265 269 .header {
266 270 display: flex;
... ...
src/static/img/detail/share-icon.png
Diff comments   View file @6cba581

1.54 KB
src/store/modules/details.js
Diff comments   View file @6cba581
... ... @@ -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/index.js
Diff comments   View file @6cba581
... ... @@ -16,6 +16,350 @@ initArr.forEach(function (value) {
16 16 list.push(initData)
17 17 });
18 18  
  19 +let categoryList = [
  20 + {
  21 + "type": "checkbox",
  22 + "name": "产品",
  23 + "value": "category",
  24 + "submenu": [
  25 + {
  26 + "label": "镜框",
  27 + "name": "镜框",
  28 + "value": "1"
  29 + },
  30 + {
  31 + "label": "镜片",
  32 + "name": "镜片",
  33 + "value": "2"
  34 + },
  35 + {
  36 + "label": "特种镜",
  37 + "name": "特种镜",
  38 + "value": "146"
  39 + }
  40 + ],
  41 + "groups": [
  42 + "001"
  43 + ]
  44 + },
  45 + {
  46 + "type": "radio",
  47 + "name": "规则",
  48 + "value": "px",
  49 + "submenu": [
  50 + {
  51 + "name": "按价格排",
  52 + "value": "1"
  53 + },
  54 + {
  55 + "name": "按销量排",
  56 + "value": "2"
  57 + }
  58 + ],
  59 + "groups": [
  60 + "002"
  61 + ]
  62 + },
  63 + {
  64 + "type": "radio",
  65 + "name": "排序",
  66 + "value": "sort",
  67 + "submenu": [
  68 + {
  69 + "name": "从高到低",
  70 + "value": "1"
  71 + },
  72 + {
  73 + "name": "从低到高",
  74 + "value": "2"
  75 + }
  76 + ],
  77 + "groups": [
  78 + "003"
  79 + ]
  80 + },
  81 + {
  82 + "type": "filter",
  83 + "name": "筛选",
  84 + "value": "filter",
  85 + "submenu": [
  86 + {
  87 + "type": "checkbox",
  88 + "name": "性别",
  89 + "value": "sex",
  90 + "submenu": [
  91 + {
  92 + "label": "男性",
  93 + "name": "男性",
  94 + "value": "27"
  95 + },
  96 + {
  97 + "label": "女性",
  98 + "name": "女性",
  99 + "value": "28"
  100 + }
  101 + ]
  102 + },
  103 + {
  104 + "type": "checkbox",
  105 + "name": "年龄",
  106 + "value": "age",
  107 + "submenu": [
  108 + {
  109 + "label": "通用",
  110 + "name": "通用",
  111 + "value": "24"
  112 + }
  113 + ]
  114 + },
  115 + {
  116 + "type": "checkbox",
  117 + "name": "适用场景",
  118 + "value": "sense",
  119 + "submenu": [
  120 + {
  121 + "label": "行政风",
  122 + "name": "行政风",
  123 + "value": "53"
  124 + },
  125 + {
  126 + "label": "青春学子风",
  127 + "name": "青春学子风",
  128 + "value": "54"
  129 + },
  130 + {
  131 + "label": "运动风",
  132 + "name": "运动风",
  133 + "value": "55"
  134 + },
  135 + {
  136 + "label": "简约-极简文艺范",
  137 + "name": "简约-极简文艺范",
  138 + "value": "56"
  139 + },
  140 + {
  141 + "label": "奶奶风",
  142 + "name": "奶奶风",
  143 + "value": "57"
  144 + },
  145 + {
  146 + "label": "流线洛可可",
  147 + "name": "流线洛可可",
  148 + "value": "58"
  149 + },
  150 + {
  151 + "label": "自然舒视角",
  152 + "name": "自然舒视角",
  153 + "value": "59"
  154 + },
  155 + {
  156 + "label": "无界人文系",
  157 + "name": "无界人文系",
  158 + "value": "60"
  159 + },
  160 + {
  161 + "label": "有机未来时",
  162 + "name": "有机未来时",
  163 + "value": "61"
  164 + },
  165 + {
  166 + "label": "立体巴洛克",
  167 + "name": "立体巴洛克",
  168 + "value": "62"
  169 + },
  170 + {
  171 + "label": "多元新风尚",
  172 + "name": "多元新风尚",
  173 + "value": "63"
  174 + },
  175 + {
  176 + "label": "理性几何派",
  177 + "name": "理性几何派",
  178 + "value": "64"
  179 + },
  180 + {
  181 + "label": "轻简北欧风",
  182 + "name": "轻简北欧风",
  183 + "value": "65"
  184 + },
  185 + {
  186 + "label": "质感哥特潮",
  187 + "name": "质感哥特潮",
  188 + "value": "66"
  189 + },
  190 + {
  191 + "label": "时尚",
  192 + "name": "时尚",
  193 + "value": "67"
  194 + },
  195 + {
  196 + "label": "复古",
  197 + "name": "复古",
  198 + "value": "68"
  199 + },
  200 + {
  201 + "label": "商务",
  202 + "name": "商务",
  203 + "value": "69"
  204 + },
  205 + {
  206 + "label": "休闲",
  207 + "name": "休闲",
  208 + "value": "70"
  209 + },
  210 + {
  211 + "label": "折射率",
  212 + "name": "折射率",
  213 + "value": "285"
  214 + }
  215 + ]
  216 + },
  217 + {
  218 + "type": "checkbox",
  219 + "name": "价格",
  220 + "value": "price",
  221 + "submenu": [
  222 + {
  223 + "name": "100以下",
  224 + "value": "1,100"
  225 + },
  226 + {
  227 + "name": "100-300",
  228 + "value": "100,300"
  229 + },
  230 + {
  231 + "name": "300-1000",
  232 + "value": "300,1000"
  233 + },
  234 + {
  235 + "name": "1000以上",
  236 + "value": "1000,-1"
  237 + }
  238 + ]
  239 + },
  240 + {
  241 + "type": "checkbox",
  242 + "name": "材质",
  243 + "value": "glasscate",
  244 + "submenu": [
  245 + {
  246 + "label": "购易",
  247 + "name": "购易",
  248 + "value": "72"
  249 + },
  250 + {
  251 + "label": "海俪恩",
  252 + "name": "海俪恩",
  253 + "value": "73"
  254 + },
  255 + {
  256 + "label": "沙漠风暴",
  257 + "name": "沙漠风暴",
  258 + "value": "74"
  259 + },
  260 + {
  261 + "label": "古诗",
  262 + "name": "古诗",
  263 + "value": "75"
  264 + },
  265 + {
  266 + "label": "暴龙",
  267 + "name": "暴龙",
  268 + "value": "76"
  269 + },
  270 + {
  271 + "label": "犀牛",
  272 + "name": "犀牛",
  273 + "value": "77"
  274 + },
  275 + {
  276 + "label": "Ray-Ban雷朋",
  277 + "name": "Ray-Ban雷朋",
  278 + "value": "78"
  279 + },
  280 + {
  281 + "label": "PARIM派丽蒙",
  282 + "name": "PARIM派丽蒙",
  283 + "value": "79"
  284 + },
  285 + {
  286 + "label": "石狼",
  287 + "name": "石狼",
  288 + "value": "80"
  289 + },
  290 + {
  291 + "label": "木九十",
  292 + "name": "木九十",
  293 + "value": "81"
  294 + }
  295 + ]
  296 + },
  297 + {
  298 + "type": "checkbox",
  299 + "name": "品牌",
  300 + "value": "brand",
  301 + "submenu": [
  302 + {
  303 + "label": "购易",
  304 + "name": "购易",
  305 + "value": "72"
  306 + },
  307 + {
  308 + "label": "海俪恩",
  309 + "name": "海俪恩",
  310 + "value": "73"
  311 + },
  312 + {
  313 + "label": "沙漠风暴",
  314 + "name": "沙漠风暴",
  315 + "value": "74"
  316 + },
  317 + {
  318 + "label": "古诗",
  319 + "name": "古诗",
  320 + "value": "75"
  321 + },
  322 + {
  323 + "label": "暴龙",
  324 + "name": "暴龙",
  325 + "value": "76"
  326 + },
  327 + {
  328 + "label": "犀牛",
  329 + "name": "犀牛",
  330 + "value": "77"
  331 + },
  332 + {
  333 + "label": "Ray-Ban雷朋",
  334 + "name": "Ray-Ban雷朋",
  335 + "value": "78"
  336 + },
  337 + {
  338 + "label": "PARIM派丽蒙",
  339 + "name": "PARIM派丽蒙",
  340 + "value": "79"
  341 + },
  342 + {
  343 + "label": "石狼",
  344 + "name": "石狼",
  345 + "value": "80"
  346 + },
  347 + {
  348 + "label": "木九十",
  349 + "name": "木九十",
  350 + "value": "81"
  351 + }
  352 + ]
  353 + }
  354 + ],
  355 + "groups": [
  356 + "001",
  357 + "002",
  358 + "003"
  359 + ],
  360 + }
  361 + ]
  362 +
19 363 //初始化数据是为了显示默认骨架
20 364 const state = {
21 365 categoryList: [],
... ... @@ -52,7 +396,6 @@ initArr.forEach(function (value) {
52 396 });
53 397 commit('CATEGORY', data);
54 398 resolve(data)
55   - console.log('3333')
56 399 },
57 400 fail: (res) => {
58 401 console.log("fail status === > ", res);
... ... @@ -67,8 +410,7 @@ initArr.forEach(function (value) {
67 410 url: shopList,
68 411 success: (res) => {
69 412 commit('LIST', res.data.data)
70   - resolve(res.data)
71   - console.log('3333')
  413 + resolve(res.data)
72 414 },
73 415 fail: (res) => {
74 416 console.log("fail status === > ", res);
... ...
src/store/modules/read.js
Diff comments   View file @6cba581
... ... @@ -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 }
... ...