Adam / gulu-vue

Compare View

switch
from
...
to
 
Commits (48)
Showing 65 changed files   Show diff stats
... ... @@ -13,6 +13,7 @@ module.exports = {
13 13 "Atomics": "readonly",
14 14 "SharedArrayBuffer": "readonly",
15 15 "uni": true,
  16 + "wx": true,
16 17 "module": true
17 18 },
18 19 "parserOptions": {
... ...
package-lock.json
Diff comments   View file @7614465
... ... @@ -9254,6 +9254,11 @@
9254 9254 "minipass": "^3.0.0"
9255 9255 }
9256 9256 },
  9257 + "miniprogram-skeleton": {
  9258 + "version": "1.0.3",
  9259 + "resolved": "https://registry.npmjs.org/miniprogram-skeleton/-/miniprogram-skeleton-1.0.3.tgz",
  9260 + "integrity": "sha512-oDt4rPP1gRYqlNuMcN+LQ0HDcEbBssOnp/weyZQsGV6+bDM++ClIX3AVU4LQBu3CF3XZ6n5qQIJJXt70e0Igsg=="
  9261 + },
9257 9262 "mississippi": {
9258 9263 "version": "3.0.0",
9259 9264 "resolved": "http://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
... ...
... ... @@ -22,7 +22,7 @@
22 22 "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
23 23 "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
24 24 "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
25   - "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
  25 + "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
26 26 "dev:quickapp-light": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-light vue-cli-service uni-build --watch",
27 27 "dev:quickapp-vue": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-vue vue-cli-service uni-build --watch",
28 28 "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
... ... @@ -42,6 +42,7 @@
42 42 "@dcloudio/uni-stat": "^2.0.0-26920200424005",
43 43 "core-js": "^3.6.4",
44 44 "flyio": "^0.6.2",
  45 + "miniprogram-skeleton": "^1.0.3",
45 46 "regenerator-runtime": "^0.12.1",
46 47 "sass-resources-loader": "^2.0.3",
47 48 "vue": "^2.6.11",
... ... @@ -90,4 +91,4 @@
90 91 "uni-app": {
91 92 "scripts": {}
92 93 }
93 94 -}
  95 +}
94 96 \ No newline at end of file
... ...
src/components/BottomSheet/BottomSheet.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,1355 @@
  1 +<template>
  2 + <view class="BottomSheetContent">
  3 + <view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}" @touchmove.stop.prevent="moveHandle" @click="closeSheet()">
  4 + <scroll-view scroll-y="true" class="sheetView" :class="{sheetView_active:isShowBottom}" @click.stop="stopEvent()" >
  5 + <view class="BottomSheetContent">
  6 + <view class="goodInfo">
  7 + <view class="imageWrap">
  8 + <image
  9 + :src="skuItem.pic"
  10 + mode="aspectFill"
  11 + style="width: 188rpx;height: 168rpx;"
  12 +
  13 + ></image>
  14 +
  15 + </view>
  16 + <view class="infoRight">
  17 + <text class="goodName">{{goodInfo.p_name}}</text>
  18 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  19 + <view class="priceBox">
  20 + <view class="price">￥{{skuItem.real_price || '暂无'}}</view>
  21 + <text>(限购{{maxCount}}副)</text>
  22 + <view class="counter">
  23 + <view
  24 + class="btn"
  25 + disabled="this.addDisabled"
  26 + type="default"
  27 + @click="counter(false)"
  28 + >-</view>
  29 + <text>{{count}}</text>
  30 + <view
  31 + class="btn"
  32 + disabled="this.desDisabled"
  33 + type="default"
  34 + @click="counter(true)"
  35 + >+</view>
  36 + </view>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + <view class="peopleChoose">
  41 + <view class="title">选择使用人</view>
  42 + <view class="loveList">
  43 + <view class="peopleName" v-for="(item,index) in loveList" :key='index' :class="{ active2: loveCurrent === index }"
  44 + @click="onClickLoveItem(index,item.name)">
  45 + {{item.name}}
  46 + </view>
  47 + </view>
  48 + </view>
  49 + <view class="goods-data" v-if="isCart !== 3">
  50 + <view class="opCollapse">
  51 + <view class="body">
  52 + <template v-if="opIsOpen">
  53 + <view class="goods-form">
  54 + <view class="p1">
  55 + <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
  56 + 填写验光数据
  57 + </view>
  58 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  59 + <view class="picker">
  60 + <view class="picker-choice">
  61 + <view class="choice-left">
  62 + <text class="pd">验光单取名:</text>
  63 + </view>
  64 + <input type="text" @blur="handleInput" class="input"
  65 + placeholder="请输入名称" maxlength="20" :value="name" />
  66 + </view>
  67 + </view>
  68 + <view class="picker" >
  69 + <view class="picker-choice">
  70 + <view class="choice-left">
  71 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  72 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  73 + </view>
  74 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  75 + <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
  76 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  77 + <view class="p14">
  78 + {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
  79 + <image src="../../static/detail-tabicon.png" ></image>
  80 + </view>
  81 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  82 + </picker>
  83 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  84 + <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
  85 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  86 + <view class="p14">
  87 + {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
  88 + <image src="../../static/detail-tabicon.png" ></image>
  89 + </view>
  90 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  91 + </picker>
  92 + </view>
  93 + </view>
  94 + <view class="picker" >
  95 + <view class="picker-choice">
  96 + <view class="choice-left">
  97 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  98 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  99 + </view>
  100 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  101 + <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
  102 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  103 + <view class="p14">
  104 + {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
  105 + <image src="../../static/detail-tabicon.png" ></image>
  106 + </view>
  107 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  108 + </picker>
  109 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  110 + <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
  111 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  112 + <view class="p14">
  113 + {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
  114 + <image src="../../static/detail-tabicon.png" ></image>
  115 + </view>
  116 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  117 + </picker>
  118 + </view>
  119 + </view>
  120 + <view class="picker" >
  121 + <view class="picker-choice">
  122 + <view class="choice-left">
  123 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  124 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  125 + </view>
  126 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  127 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  128 + <view class="p14">
  129 + {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
  130 + <image src="../../static/detail-tabicon.png" ></image>
  131 + </view>
  132 + </picker>
  133 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  134 + <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
  135 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  136 + <view class="p14">
  137 + {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
  138 + <image src="../../static/detail-tabicon.png" ></image>
  139 + </view>
  140 + <!-- <image src="../../static/detail-tabicon.png" ></image> -->
  141 + </picker>
  142 + </view>
  143 + </view>
  144 + <view class="picker">
  145 + <view class="picker-choice">
  146 + <view class="choice-left">
  147 + <text class="pd">瞳距:</text>
  148 + </view>
  149 + <input type="digit" @change="handleInputPd" class="input"
  150 + placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
  151 + </view>
  152 + </view>
  153 + <view class="picker" >
  154 + <view class="picker-choice">
  155 + <view class="choice-left">
  156 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  157 + </view>
  158 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  159 + <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  160 + <view class="p14" style="width: 30px;">
  161 + {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
  162 + <image src="../../static/detail-tabicon.png" ></image>
  163 + </view>
  164 + </picker>
  165 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  166 + <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  167 + <view class="p14" style="width: 30px;">
  168 + {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
  169 + <image src="../../static/detail-tabicon.png" ></image>
  170 + </view>
  171 + </picker>
  172 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  173 + <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
  174 + <view class="p14" style="width: 30px;">
  175 + {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
  176 + <image src="../../static/detail-tabicon.png" ></image>
  177 + </view>
  178 + </picker>
  179 + </view>
  180 + </view>
  181 + <view class="ipts">
  182 + <view class="inputItem">
  183 + <text class="text">镜片宽度</text>
  184 + <input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!=='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
  185 + </view>
  186 + <view class="inputItem">
  187 + <text class="text">鼻梁宽度</text>
  188 + <input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!=='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
  189 + </view>
  190 + <view class="inputItem">
  191 + <text class="text">镜腿长度</text>
  192 + <input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!=='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
  193 + </view>
  194 +
  195 + </view>
  196 + <!-- <view class="confirm">
  197 + <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
  198 + <text>确认以上输入信息来源于我的验光数据!</text>
  199 + </view> -->
  200 + </view>
  201 + </template>
  202 + <template v-else>
  203 + <view
  204 + v-for="item in pickerInfoList"
  205 + :key="item.key"
  206 + class="bodyBox"
  207 + >
  208 + <template v-if="item.nameC==='验光日期'">
  209 + <text class="names">{{item.nameC}}</text>
  210 + <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
  211 + <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
  212 + <text>{{item.nameArray3[item.nameIndex2]}}日</text>
  213 + </template>
  214 + <template v-else>
  215 + <template v-if="item.nameC==='度数'">
  216 + <text style="display: inline;">*</text>
  217 + </template>
  218 +
  219 + <text class="names">{{item.nameC}}</text>
  220 + <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
  221 + <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
  222 + </template>
  223 + </view>
  224 + </template>
  225 + </view>
  226 + </view>
  227 + </view>
  228 + <view class="choose">
  229 + <view
  230 + class="chooseItem_1_content"
  231 + v-for="(item,index) in attrList"
  232 + :key="index"
  233 + >
  234 + <UniCollapse @change="changeShow(index)">
  235 + <UniCollapseItem
  236 + :open="show[index]"
  237 + :title="item.meta_name"
  238 + showAnimation=false
  239 + >
  240 + <view class="chooseItem_1_content">
  241 + <view class="itemsWrap" v-if="isCart ==3">
  242 + <view
  243 + class="item2"
  244 + v-for="(one,i) in item.attr"
  245 + :key="i"
  246 + :class="{ active2: current[index] === i}"
  247 + @click="cartOnClickItem(index, i,one.aid)"
  248 + >{{one.name}}</view>
  249 + </view>
  250 + <view class="itemsWrap" v-else>
  251 + <view
  252 + class="item2"
  253 + v-for="(one,i) in item.attr"
  254 + :key="i"
  255 + :class="{ active2: current[index] === i }"
  256 + @click="cartOnClickItem(index, i,one.aid)"
  257 + >{{one.name}}</view>
  258 + </view>
  259 + </view>
  260 + </UniCollapseItem>
  261 + </UniCollapse>
  262 + <view
  263 + class="chooseRes"
  264 + v-show="!show[index]"
  265 + >* {{attrList[index].attr[current[index]].name}}</view>
  266 + </view>
  267 + </view>
  268 + <view
  269 + class="button"
  270 + @click.native="addCart"
  271 + v-if="isCart == 1"
  272 + >
  273 + 加入购物车
  274 + </view>
  275 + <view
  276 + class="button"
  277 + @click="toComfirmOrder"
  278 + v-if="isCart == 2"
  279 + >
  280 + 立即结算
  281 + </view>
  282 + <view
  283 + class="button"
  284 + @click="comfirmChoose"
  285 + v-if="isCart == 3"
  286 + >
  287 + 确定
  288 + </view>
  289 + </view>
  290 + </scroll-view>
  291 + </view>
  292 + </view>
  293 +</template>
  294 +<script>
  295 +import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  296 +import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  297 +import store from '@/store'
  298 + export default {
  299 + components: {
  300 + UniCollapse,
  301 + UniCollapseItem,
  302 + },
  303 + props: {
  304 + isShowBottom : Boolean,
  305 + pid: Number,
  306 + sk_id:String,
  307 + propMpId:String,
  308 + goodInfo:Object,
  309 + isCart:Number,
  310 + cart_id:Number,
  311 + index:Number
  312 + },
  313 + data() {
  314 + return {
  315 + loveCurrent:Number,
  316 + count: 1,
  317 + // pid: 0,
  318 + maxCount: 20,
  319 + dataName: '', // 验光数据人员名称
  320 + isDataName: false, // 是否是已存在的人员数据
  321 + dataConfirm: false, // 已确认所输入验光数据
  322 + opIsOpen: true,
  323 + addDisabled: false,
  324 + desDisabled: false,
  325 + current: [],
  326 + show: [true,true],
  327 + checkedData: {},
  328 + // 度数相关数据
  329 + pickerInfoList: [
  330 + { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
  331 + { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
  332 + { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
  333 + { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
  334 + ],
  335 + // confirm: false, // 用户是否确认
  336 + // tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
  337 + name: '',
  338 + oldname: '', // 用于判读用户是否改变名字
  339 + pickerInfoChioce: {
  340 + leftSph: '',
  341 + rightSph: '',
  342 + leftCyl: '',
  343 + rightCyl: '',
  344 + leftAxi: '',
  345 + rightAxi: '',
  346 + time: {
  347 + year: 0,
  348 + month: 0,
  349 + day: 0,
  350 + },
  351 + },
  352 + glassInfo:{
  353 + glassWidth:Number,//镜片宽度
  354 + norseWidth:Number,//鼻宽
  355 + legWidth:Number//镜腿长度
  356 + },
  357 + pd: '', // 瞳距
  358 + oldpd: '', // 用于判断用户是否改变瞳距
  359 + kinds: 1, // kinds=1，提交为新增验光，2为修改
  360 + mp_id: Number,
  361 + skuValueArray:[],
  362 + skId:String
  363 + }
  364 + },
  365 + computed: {
  366 + //进购物车选择的人的index
  367 + p_current(){
  368 + const getLoveItemIndex = (item) => item.mp_id == this.propMpId
  369 + const p_current = this.$store.state.myLoveList.loveList.findIndex(getLoveItemIndex )
  370 + if(this.isCart == 3){
  371 + this.loveCurrent = p_current
  372 + }
  373 + return p_current
  374 + },
  375 + arr_current(){
  376 + if(this.isCart == 3){
  377 + const skId = this.sk_id
  378 + const skuValue = this.skuItem.sku_value
  379 + const skuValueArray = skuValue.split('_')
  380 + this.skuValueArray = skuValueArray
  381 + const attrList = this.$store.state.read.goodInfo.attrList
  382 + for (let i = 0;i<attrList.length;i++) {
  383 + const getArrIndex = (item) => item.aid == skuValueArray[i]
  384 + const arr_current = this.$store.state.read.goodInfo.attrList[i].attr.findIndex(getArrIndex )
  385 + // console.log('arr_current',arr_current)
  386 + this.current.push(arr_current)
  387 + }
  388 + }else{
  389 + return null
  390 + }
  391 + },
  392 + loveList() {
  393 + return this.$store.state.myLoveList.loveList || []
  394 + },
  395 + attrList() {
  396 + // console.log('attrList',this.$store.state.read.goodInfo.attrList)
  397 + let attrList = this.$store.state.read.goodInfo.attrList
  398 + if(attrList !== undefined){
  399 + return attrList
  400 + }else{
  401 + return []
  402 + }
  403 + },
  404 + skuList() {
  405 + // console.log('skuList',this.$store.state.read.goodInfo.skuList)
  406 + return this.$store.state.read.goodInfo.skuList
  407 + },
  408 + skuItem(){
  409 + // if(this.isCart == 3){
  410 + const skuList = this.$store.state.read.goodInfo.skuList
  411 + const skuItem = skuList.filter(item => item.sk_id === this.skId)[0]
  412 + return skuItem
  413 + // }else{
  414 + // const skuList = this.$store.state.read.goodInfo.skuList
  415 + // const skuItem = skuList[0]
  416 + // return skuItem
  417 + // }
  418 + },
  419 + mpList() {
  420 +
  421 + return this.$store.state.myLoveList.loveList
  422 + },
  423 + glassInfoRight(){
  424 + const glassInfoArr = Object.values(this.glassInfo)
  425 + // console.log('glassInfoArr',glassInfoArr.find(item => item == '0'))
  426 + return glassInfoArr.find(item => item == '0') ==undefined
  427 + }
  428 + },
  429 + created() {
  430 + this.skuValueArray = this.skuList[0].sku_value.split("_")
  431 + // console.log(this.sk_id)
  432 + this.mp_id = this.propMpId
  433 + const pid = this.pid
  434 + if(this.isCart!==3){
  435 + this.skId = this.skuList[0].sk_id
  436 + const current = []
  437 + const show = []
  438 + for (let index = 0; index < this.attrList.length; index++) {
  439 + current.push(0)
  440 + show.push(true)
  441 + }
  442 + this.current = current
  443 + this.show = show
  444 + }else{
  445 + this.skId = this.sk_id
  446 + }
  447 + //获取关心的人列表
  448 + store.dispatch('myLoveList/getLoveList', {
  449 + uid: this.$store.state.user.userInfo.uid,
  450 + });
  451 + // 初始化SPL、CYL、AXI的值
  452 + for (let j = 0; j < 3; j++) {
  453 + for (let i = -12; i < 6; i++) {
  454 + this.pickerInfoList[j].nameArray1.push(i)
  455 + this.pickerInfoList[j].nameArray1.push(i + 0.5)
  456 + this.pickerInfoList[j].nameArray2.push(i)
  457 + this.pickerInfoList[j].nameArray2.push(i + 0.5)
  458 + if (i >= -6) {
  459 + this.pickerInfoList[j].nameArray1.push(i + 0.25)
  460 + this.pickerInfoList[j].nameArray1.push(i + 0.75)
  461 + this.pickerInfoList[j].nameArray2.push(i + 0.25)
  462 + this.pickerInfoList[j].nameArray2.push(i + 0.75)
  463 + }
  464 + if (i === 5) {
  465 + this.pickerInfoList[j].nameArray1.push(i + 1)
  466 + this.pickerInfoList[j].nameArray2.push(i + 1)
  467 + }
  468 + }
  469 + }
  470 + // 初始化日期值
  471 + for (let i = 1; i < 32; i++) {
  472 + this.pickerInfoList[3].nameArray3.push(i)
  473 + }
  474 + // 初始化年份前后五年
  475 + const myDate = new Date()
  476 + const nowYear = myDate.getFullYear()
  477 + for (let i = 0; i < 5; i++) {
  478 + this.pickerInfoList[3].nameArray1.push(nowYear - i)
  479 + }
  480 + },
  481 + name : "bottomSheet",
  482 + methods: {
  483 + //判断眼镜数据是否为0
  484 + checkGlassInfo(){
  485 + // const glassInfoArr = Object.values(this.glassInfo)
  486 + // console.log(this.glassInfoRight)
  487 + if(!this.glassInfoRight){
  488 + uni.showToast({
  489 + title:'请完善镜框数据~',
  490 + icon:'none'
  491 + })
  492 + }
  493 + },
  494 + updateMylove(){
  495 + const loveItem = this.loveList[this.loveCurrent]
  496 + const glassWidth = this.glassInfo.glassWidth
  497 + const norseWidth = this.glassInfo.norseWidth
  498 + const legWidth = this.glassInfo.legWidth
  499 + if(loveItem.glassWidth !== glassWidth){
  500 + store.dispatch('myLoveList/updateMylove', {
  501 + uid: this.$store.state.user.userInfo.uid,
  502 + openid: this.$store.state.user.userInfo.openid,
  503 + mp_id: this.mp_id,
  504 + keyname: 'glassWidth',
  505 + keyvalue: glassWidth
  506 + });
  507 + }
  508 + if(loveItem.norseWidth !== norseWidth){
  509 + store.dispatch('myLoveList/updateMylove', {
  510 + uid: this.$store.state.user.userInfo.uid,
  511 + openid: this.$store.state.user.userInfo.openid,
  512 + mp_id: this.mp_id,
  513 + keyname: 'norseWidth',
  514 + keyvalue: norseWidth
  515 + });
  516 + }
  517 + if(loveItem.legWidth !== legWidth){
  518 + store.dispatch('myLoveList/updateMylove', {
  519 + uid: this.$store.state.user.userInfo.uid,
  520 + openid: this.$store.state.user.userInfo.openid,
  521 + mp_id: this.mp_id,
  522 + keyname: 'legWidth',
  523 + keyvalue: legWidth
  524 + });
  525 + }
  526 + },
  527 + glassInfoInput(e,type){
  528 + switch(type){
  529 + case 0:
  530 + this.glassInfo.glassWidth = e.detail.value
  531 + break;
  532 + case 1:
  533 + this.glassInfo.norseWidth = e.detail.value
  534 + break;
  535 + case 2:
  536 + this.glassInfo.legWidth = e.detail.value
  537 + break;
  538 + default:
  539 + break;
  540 + }
  541 + },
  542 + //参数点击事件==》改变对应图片
  543 + cartOnClickItem(index, i,aid) {
  544 + //根据aid拼接skuValue
  545 + this.skuValueArray[index] = aid
  546 + const sku_value = this.skuValueArray.join('_')
  547 + //根据sku_value获取对应的sk_id
  548 + const itemSk_id = this.skuList.filter(item=>item.sku_value == sku_value)[0].sk_id
  549 + //修改sk_id
  550 + this.skId = itemSk_id
  551 + if (this.current[index] !== i) {
  552 + this.current[index] = i
  553 + }
  554 + this.$forceUpdate()
  555 + },
  556 + comfirmChoose(){
  557 + this.checkGlassInfo()
  558 + if(this.glassInfoRight){
  559 + this.updateMylove()
  560 + const price = this.skuList.filter(item=>item.sk_id == this.skId)[0].real_price
  561 + this.$emit("chooseCartModi",this.mp_id,this.skId,price,this.pid,this.count,this.cart_id,this.index)//添加购物车
  562 + this.$emit("closeBottom")
  563 + }
  564 + },
  565 + addCart(){
  566 + this.checkGlassInfo()
  567 + if(this.glassInfoRight){
  568 + this.updateMylove()
  569 + const that = this
  570 + const checkedSKUName = [that.goodInfo.attrList[0].meta_name,that.goodInfo.attrList[1].meta_name]
  571 + const checkedSKU = []
  572 + let j;
  573 + for (let i = 0;i<that.current.length;i++) {
  574 + checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
  575 + // console.log('i', i, j, i !== this.current.length - 1)
  576 + if (i !== this.current.length - 1) {
  577 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  578 + j = this.current[i] * this.attrList[1].attr.length
  579 + } else {
  580 + j += this.current[i]
  581 + }
  582 + }
  583 + const price = this.skuList.filter(item=>item.sk_id == this.skuList[j].sk_id)[0].real_price
  584 + let sk_id = this.skuList[j].sk_id
  585 + // console.log('选择的商品sk_id',sk_id,'选择的商品参数',checkedSKU)
  586 + // console.log('mp_id',this.mp_id,'数量',this.count)
  587 + this.$emit("addCart",this.mp_id,this.count,checkedSKU,sk_id,price)//添加购物车
  588 + this.$emit("closeBottom")//关闭弹窗
  589 + }
  590 + },
  591 + onClickLoveItem(index,name){
  592 + const loveList = this.loveList
  593 + this.glassInfo.glassWidth = loveList[index].glassWidth
  594 + this.glassInfo.norseWidth = loveList[index].norseWidth
  595 + this.glassInfo.legWidth = loveList[index].legWidth
  596 + for (let index = 0; index < loveList.length; index++) {
  597 + if (name === loveList[index].name && name!==this.name) {
  598 + this.isDataName = true
  599 + this.kinds = 2
  600 + this.name = loveList[index].name
  601 + this.pd = loveList[index].pd
  602 + this.mp_id = loveList[index].mp_id
  603 + this.oldname = loveList[index].name
  604 + this.oldpd = loveList[index].pd
  605 + this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
  606 + this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
  607 + this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
  608 + this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
  609 + this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
  610 + this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
  611 + this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
  612 + if (loveList[index].in_time.toString().slice(5, 6) === 0) {
  613 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
  614 + } else {
  615 + this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
  616 + }
  617 + if (loveList[index].in_time.toString().slice(8, 9) === 0) {
  618 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
  619 + } else {
  620 + this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
  621 + }
  622 + }
  623 + }
  624 + this.name = name;
  625 + this.loveCurrent = index;
  626 + },
  627 + closeSheet(){
  628 + this.$emit('closeBottom');
  629 + },
  630 + stopEvent(){ //@click.stop防止事件冒泡
  631 +
  632 + },
  633 + moveHandle(){ //不让页面滚动
  634 +
  635 + },
  636 + // picker相关功能
  637 + handleInput(e) {
  638 + this.name = e.target.value
  639 + this.isDataName = false
  640 + const mpList = this.mpList
  641 + // console.log('mpList===>', mpList)
  642 + for (let index = 0; index < mpList.length; index++) {
  643 + if (e.detail.value === mpList[index].name) {
  644 + this.isDataName = true
  645 + uni.showModal({
  646 + title: '提示',
  647 + content: `是否填充已有的"${e.detail.value}"的数据`,
  648 + success: (res) => {
  649 + if (res.confirm) {
  650 + this.kinds = 2
  651 + // console.log('args===>', index)
  652 + // const mpList=Object.assign({},this.$store.state.mympList.mpList)
  653 + this.name = mpList[index].name
  654 + this.pd = mpList[index].pd
  655 + this.mp_id = mpList[index].mp_id
  656 + this.oldname = mpList[index].name
  657 + this.oldpd = mpList[index].pd
  658 + // 将kinds =2时的值传到该页面
  659 + this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
  660 + this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
  661 + this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
  662 + this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
  663 + this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
  664 + this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
  665 + this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
  666 + if (mpList[index].in_time.toString().slice(5, 6) === 0) {
  667 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
  668 + } else {
  669 + this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
  670 + }
  671 + if (mpList[index].in_time.toString().slice(8, 9) === 0) {
  672 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
  673 + } else {
  674 + this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
  675 + }
  676 + // this.checkedData = mpList[index]
  677 + // console.log('checkedData', this.checkedData)
  678 + } else if (res.cancel) {
  679 + this.kinds = 2
  680 + }
  681 + },
  682 + })
  683 + }
  684 + }
  685 + },
  686 + handleInputPd(e) {
  687 + // 只能输入正浮点数或正数
  688 + if (/^\d+(\.\d+)?$/.test(e.target.value)) {
  689 + this.pd = e.target.value
  690 + } else {
  691 + uni.showToast({
  692 + title: '请输入有效数据;示例:89',
  693 + icon: 'none',
  694 + duration: 2000,
  695 + })
  696 + this.pd = ''
  697 + }
  698 + },
  699 + // changeConfirm() {
  700 + // this.confirm = !this.confirm
  701 + // },
  702 + bindPickerChange01: function(e) {
  703 + this.pickerInfoList[0].nameIndex1 = e.target.value
  704 + this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
  705 + },
  706 + bindPickerChange02: function(e) {
  707 + this.pickerInfoList[0].nameIndex2 = e.target.value
  708 + this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
  709 + },
  710 +
  711 + bindPickerChange11: function(e) {
  712 + this.pickerInfoList[1].nameIndex1 = e.target.value
  713 + this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
  714 + },
  715 + bindPickerChange12: function(e) {
  716 + this.pickerInfoList[1].nameIndex2 = e.target.value
  717 + this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
  718 + },
  719 +
  720 + bindPickerChange21: function(e) {
  721 + this.pickerInfoList[2].nameIndex1 = e.target.value
  722 + this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
  723 + },
  724 + bindPickerChange22: function(e) {
  725 + this.pickerInfoList[2].nameIndex2 = e.target.value
  726 + this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
  727 + },
  728 +
  729 + bindPickerChange41: function(e) {
  730 + this.pickerInfoList[3].nameIndex1 = e.target.value
  731 + this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
  732 + },
  733 + bindPickerChange42: function(e) {
  734 + this.pickerInfoList[3].nameIndex2 = e.target.value
  735 + this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
  736 + },
  737 + bindPickerChange43: function(e) {
  738 + this.pickerInfoList[3].nameIndex3 = e.target.value
  739 + this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
  740 + },
  741 + changeShow(num) {
  742 + this.show[num] = !this.show[num]
  743 + this.$forceUpdate()
  744 + },
  745 + counter(isadd) {
  746 + if (isadd) {
  747 + this.count >= this.maxCount ? this.addDisabled = true : this.count++
  748 + } else {
  749 + this.count <= 1 ? this.desDisabled = true : this.count--
  750 + }
  751 + },
  752 + toComfirmOrder() {
  753 + this.checkGlassInfo()
  754 + this.updateMylove()
  755 + // 先处理验光部分的逻辑，如果ok在跳转
  756 + let flag = 0
  757 + if (this.name === '') {
  758 + uni.showToast({
  759 + title: '请输入验光单取名',
  760 + icon: 'none',
  761 + duration: 2000,
  762 + })
  763 + } else {
  764 + if (this.pd === '') {
  765 + uni.showToast({
  766 + title: '请输入瞳距',
  767 + icon: 'none',
  768 + duration: 2000,
  769 + })
  770 + } else {
  771 + if (this.kinds === 1) {
  772 + // 添加用户验光单
  773 + if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
  774 + this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
  775 + this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
  776 + ) {
  777 + uni.showToast({
  778 + title: '请输入您的验光数据',
  779 + icon: 'none',
  780 + duration: 2000,
  781 + })
  782 + } else {
  783 + // if (this.confirm) {
  784 + store.dispatch('myLoveList/addMylove', {
  785 + uid: this.$store.state.user.userInfo.uid,
  786 + openid: this.$store.state.user.userInfo.openid,
  787 + // mp_name: this.$store.state.user.userInfo.mp_name,
  788 + leftSph: this.pickerInfoChioce.leftSph,
  789 + rightSph: this.pickerInfoChioce.rightSph,
  790 + leftCyl: this.pickerInfoChioce.leftCyl,
  791 + rightCyl: this.pickerInfoChioce.rightCyl,
  792 + leftAxi: this.pickerInfoChioce.leftAxi,
  793 + rightAxi: this.pickerInfoChioce.rightAxi,
  794 + pd: this.pd, // 瞳距
  795 + mp_name: this.name,
  796 + // time: this.pickerInfoChioce.time,
  797 + // img_url2: "http://localhost:8087/images/shop_1/1/",
  798 + }).then(({ mp_id: mpId }) => {
  799 + this.mp_id = mpId
  800 + })
  801 + flag = 1
  802 + }
  803 + }
  804 + if (this.kinds === 2) {
  805 + // if (this.confirm) {
  806 + const leftList = ['leftSph', 'leftCyl', 'leftAxi']
  807 + const rightList = ['rightSph', 'rightCyl', 'rightAxi']
  808 + // let flag=0;
  809 + if (this.name !== this.oldname) {
  810 + store.dispatch('myLoveList/updateMylove', {
  811 + uid: this.$store.state.user.userInfo.uid,
  812 + openid: this.$store.state.user.userInfo.openid,
  813 + mp_id: this.mp_id,
  814 + keyname: 'name',
  815 + keyvalue: this.name,
  816 + })
  817 + flag = 1
  818 + }
  819 + if (this.pd !== this.oldpd) {
  820 + store.dispatch('myLoveList/updateMylove', {
  821 + uid: this.$store.state.user.userInfo.uid,
  822 + openid: this.$store.state.user.userInfo.openid,
  823 + mp_id: this.mp_id,
  824 + keyname: 'pd',
  825 + keyvalue: this.pd,
  826 + })
  827 + flag = 1
  828 + }
  829 + // 先验证是否输入有无空
  830 + let q = true
  831 + for (let k = 0; k < 3; k++) {
  832 + q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
  833 + this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
  834 + }
  835 + if (q) {
  836 + for (let j = 0; j < 3; j++) {
  837 + if (this.pickerInfoList[j].nameIndex1 !== 0) {
  838 + store.dispatch('myLoveList/updateMylove', {
  839 + uid: this.$store.state.user.userInfo.uid,
  840 + openid: this.$store.state.user.userInfo.openid,
  841 + mp_id: this.mp_id,
  842 + keyname: leftList[j],
  843 + keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
  844 + })
  845 + }
  846 + if (this.pickerInfoList[j].nameIndex2 !== 0) {
  847 + store.dispatch('myLoveList/updateMylove', {
  848 + uid: this.$store.state.user.userInfo.uid,
  849 + openid: this.$store.state.user.userInfo.openid,
  850 + mp_id: this.mp_id,
  851 + keyname: rightList[j],
  852 + keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
  853 + })
  854 + }
  855 + flag = 1
  856 + }
  857 + } else {
  858 + flag = 0
  859 + uni.showToast({
  860 + title: '请输入您的验光数据',
  861 + icon: 'none',
  862 + duration: 2000,
  863 + })
  864 + }
  865 +
  866 + // } else {
  867 + // uni.showToast({
  868 + // title: '请确认您的验光数据',
  869 + // icon: 'none',
  870 + // duration: 3000,
  871 + // })
  872 + // }
  873 + }
  874 + }
  875 + }
  876 + if (flag !== 0) {
  877 + // 如果数据验证无误，那么更新验光单的数据
  878 + store.dispatch('myLoveList/getLoveList', {
  879 + uid: this.$store.state.user.userInfo.uid,
  880 + })
  881 + let i = 0
  882 + // 判断出是哪一个sku被选中
  883 + for (let index = 0; index < this.current.length; index++) {
  884 + // console.log('index', index, i, index !== this.current.length - 1)
  885 + if (index !== this.current.length - 1) {
  886 + // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
  887 + i = this.current[index] * this.attrList[1].attr.length
  888 + } else {
  889 + i += this.current[index]
  890 + }
  891 + }
  892 + // 判断是否其输入的人员数据是否已存在
  893 + store.dispatch('order/saveParams', {
  894 + sk_id_arr: this.skuList[i],
  895 + current: this.current,
  896 + mp_id: this.mp_id,
  897 + attrList: this.attrList,
  898 + })
  899 + this.$store.state.cart.buyItem = this.skuItem
  900 + // 跳转到确认订单页面
  901 + uni.navigateTo({
  902 + url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`,
  903 + })
  904 + }
  905 + },
  906 + }
  907 + }
  908 +</script>
  909 +
  910 +<style lang="scss">
  911 + .BottomSheetContent {
  912 + min-height: 100vh;
  913 + background-color: #f2f2f2;
  914 + // padding-top: 20rpx;
  915 + .goodInfo {
  916 + width: 100%;
  917 + height: 272rpx;
  918 + border-radius: 16rpx;
  919 + background-color: #ffffff;
  920 + box-sizing: border-box;
  921 + padding: 36rpx;
  922 + display: flex;
  923 + flex-direction: row;
  924 + justify-content: flex-start;
  925 + position: sticky;
  926 + top: 0rpx;
  927 + left: 0rpx;
  928 + z-index: 99999;
  929 + .imageWrap {
  930 + height: 188rpx;
  931 + width: 188rpx;
  932 + margin-right: 28rpx;
  933 + image {
  934 + height: 188rpx;
  935 + width: 188rpx;
  936 + }
  937 + }
  938 + .infoRight {
  939 + display: flex;
  940 + flex-direction: column;
  941 + align-items: flex-start;
  942 + justify-content: space-between;
  943 + width: 100%;
  944 + .goodName {
  945 + font-size: 28rpx;
  946 + color: #333333;
  947 + }
  948 + .remarks {
  949 + font-size: 20rpx;
  950 + color: #999999;
  951 + }
  952 + .priceBox {
  953 + display: flex;
  954 + justify-content: space-between;
  955 + align-items: center;
  956 + width: 100%;
  957 + font-size: 14px;
  958 + color: #999999;
  959 + .price {
  960 + color: #ff6b4a;
  961 + font-size: 28rpx;
  962 + }
  963 + .counter {
  964 + display: flex;
  965 + flex-direction: row;
  966 + justify-content: space-between;
  967 + align-items: center;
  968 + font-size: 28rpx;
  969 + color: #333333;
  970 + width: 122rpx;
  971 + .btn {
  972 + display: flex;
  973 + justify-content: center;
  974 + line-height: 32rpx;
  975 + height: 32rpx;
  976 + width: 32rpx;
  977 + background-color: #f2f2f2;
  978 + color: #cfcfcf;
  979 + }
  980 + }
  981 + }
  982 + }
  983 + }
  984 + .peopleChoose{
  985 + width: 100%;
  986 + min-height: 200rpx;
  987 + border-radius: 16rpx;
  988 + background-color: #ffffff;
  989 + box-sizing: border-box;
  990 + padding: 36rpx;
  991 + margin: 10px 0;
  992 + display: flex;
  993 + flex-direction: column;
  994 + justify-content: flex-start;
  995 + align-items: center;
  996 + .title{
  997 + font-size: 16px;
  998 + color: #333333;
  999 + letter-spacing: -0.3px;
  1000 + text-align: justify;
  1001 + line-height: 24px;
  1002 + margin: 4px 0;
  1003 + }
  1004 + .loveList{
  1005 + display: flex;
  1006 + flex-direction: row;
  1007 + flex-wrap: wrap;
  1008 + justify-content: flex-start;
  1009 + align-items: center;
  1010 + padding-top: 24rpx;
  1011 + width: 100%;
  1012 + .peopleName {
  1013 + padding: 0 30rpx;
  1014 + height: 60rpx;
  1015 + margin: 0 20rpx 20rpx 0;
  1016 + transition: all 0.3s;
  1017 + background: #f2f2f2;
  1018 + border-radius: 2px;
  1019 + border-radius: 2px;
  1020 + line-height: 60rpx;
  1021 + text-align: center;
  1022 + color: #666666;
  1023 + font-size: 12px;
  1024 + }
  1025 + .active2 {
  1026 + background: rgba(255, 107, 74, 0.15);
  1027 + color: #ff6b4a;
  1028 + }
  1029 + }
  1030 + }
  1031 + .goods-data {
  1032 + width: 100%;
  1033 + box-sizing: border-box;
  1034 + padding: 37rpx 40rpx 0 40rpx;
  1035 + background: #ffffff;
  1036 + border-radius: 12rpx;
  1037 + .opCollapse {
  1038 + width: 100%;
  1039 + padding-bottom: 28rpx;
  1040 + margin-top: 7px;
  1041 + border-bottom: 1px solid #e9e9e9;
  1042 + .head {
  1043 + display: flex;
  1044 + justify-content: space-between;
  1045 + height: 24px;
  1046 + // font-family: PingFangSC-Medium;
  1047 + font-size: 16px;
  1048 + color: #333333;
  1049 + letter-spacing: -0.3px;
  1050 + text-align: justify;
  1051 + line-height: 24px;
  1052 + margin-bottom: 18rpx;
  1053 + .headRighted {
  1054 + width: 0;
  1055 + height: 0;
  1056 + border-left: 4px solid transparent;
  1057 + border-right: 4px solid transparent;
  1058 + border-bottom: 4px solid #cfcfcf;
  1059 + transform: scaleY(-1);
  1060 + margin-top: 10px;
  1061 + }
  1062 + .headMid {
  1063 + font-size: 10px;
  1064 + color: #999999;
  1065 + letter-spacing: -0.19px;
  1066 + margin-left: -120rpx;
  1067 + }
  1068 + .headRight {
  1069 + width: 0;
  1070 + height: 0;
  1071 + border-left: 4px solid transparent;
  1072 + border-right: 4px solid transparent;
  1073 + border-bottom: 4px solid #cfcfcf;
  1074 + margin-top: 10px;
  1075 + }
  1076 + }
  1077 + .body {
  1078 + font-size: 12px;
  1079 + color: #666666;
  1080 + letter-spacing: 0;
  1081 + .bodyBox {
  1082 + margin-top: 15px;
  1083 + .names {
  1084 + font-size: 12px;
  1085 + color: #151515;
  1086 + letter-spacing: 0;
  1087 + text-align: justify;
  1088 + line-height: 17px;
  1089 + margin-left: 5px;
  1090 + margin-right: 10px;
  1091 + }
  1092 + text {
  1093 + font-size: 12px;
  1094 + color: #666666;
  1095 + letter-spacing: 0;
  1096 + text-align: justify;
  1097 + }
  1098 + }
  1099 + }
  1100 + .goods-form {
  1101 + display: flex;
  1102 + flex-direction: column;
  1103 + align-items: center;
  1104 + justify-content: center;
  1105 + background-color: #fff;
  1106 + width: 100%;
  1107 + padding: 40rpx 0;
  1108 + .p1 {
  1109 + font-size: 16px;
  1110 + color: #333333;
  1111 + letter-spacing: -0.3px;
  1112 + text-align: justify;
  1113 + line-height: 24px;
  1114 + margin: 4px 0;
  1115 +
  1116 + }
  1117 + .p2 {
  1118 + font-size: 12px;
  1119 + color: #999999;
  1120 + letter-spacing: -0.23px;
  1121 + margin-bottom: 32rpx;
  1122 + }
  1123 + .image2{
  1124 + width: 42rpx;
  1125 + height: 34rpx;
  1126 + margin-right: 12rpx;
  1127 + }
  1128 + .confirm {
  1129 + display: flex;
  1130 + align-items: center;
  1131 + font-size: 12px;
  1132 + color: #666666;
  1133 + letter-spacing: -0.23px;
  1134 + width: 684rpx;
  1135 + .image1{
  1136 + margin-right:25rpx;
  1137 + width: 42rpx;
  1138 + height: 38rpx;
  1139 + }
  1140 + }
  1141 + .picker{
  1142 + display: flex;
  1143 + flex-direction: column;
  1144 + justify-content: center;
  1145 + align-items: center;
  1146 + width: 100%;
  1147 +
  1148 + .picker-choice{
  1149 + display: flex;
  1150 + width: 684rpx;
  1151 + align-items: center;
  1152 + margin-bottom: 40rpx;
  1153 + .input{
  1154 + border-bottom: 1px solid #CFCFCF;
  1155 + height: 40rpx;
  1156 + }
  1157 + .choice-left{
  1158 + width: 210rpx;
  1159 + .pd{
  1160 + font-size: 14px;
  1161 + color: #333333;
  1162 + letter-spacing: -0.26px;
  1163 + text-align: justify;
  1164 + line-height: 24px;
  1165 + margin-right: 44rpx;
  1166 + }
  1167 + .p11 {
  1168 + font-size: 14px;
  1169 + color: #333333;
  1170 + letter-spacing: -0.26px;
  1171 + text-align: justify;
  1172 + line-height: 24px;
  1173 + // margin-right: 10px;
  1174 + }
  1175 + .p12 {
  1176 + font-size: 10px;
  1177 + color: #3F3F3F;
  1178 + letter-spacing: -0.19px;
  1179 + text-align: justify;
  1180 + line-height: 24px;
  1181 + }
  1182 +
  1183 + }
  1184 + .p13 {
  1185 + font-size: 10px;
  1186 + color: #999999;
  1187 + letter-spacing: -0.19px;
  1188 + margin-right: 10px;
  1189 + }
  1190 + .p13-date {
  1191 + font-size: 10px;
  1192 + color: #999999;
  1193 + letter-spacing: -0.19px;
  1194 + margin-right: 5px;
  1195 + }
  1196 + picker{
  1197 + width: 144rpx;
  1198 + height: 40rpx;
  1199 + display: flex;
  1200 + position: relative;
  1201 + .p14 {
  1202 + font-size: 14px;
  1203 + color: #666666;
  1204 + letter-spacing: -0.26px;
  1205 + text-align: center;
  1206 + width: 124rpx;
  1207 + border-bottom: 1px solid #CFCFCF;
  1208 + height: 38rpx;
  1209 + }
  1210 + image{
  1211 + width: 20rpx;
  1212 + height: 20rpx;
  1213 + position: absolute;
  1214 + right: 20rpx;
  1215 + top: 8rpx;
  1216 + }
  1217 + }
  1218 +
  1219 + }
  1220 + }
  1221 +
  1222 + .ipts{
  1223 + width: 100%;
  1224 + display: flex;
  1225 + flex-direction: column;
  1226 + justify-content: center;
  1227 + align-items: flex-start;
  1228 + // padding: 20rpx 36rpx;
  1229 + box-sizing: border-box;
  1230 + .inputItem{
  1231 + display: flex;
  1232 + flex-direction: row;
  1233 + justify-content: center;
  1234 + align-items: center;
  1235 + margin-bottom: 36rpx;
  1236 + .text{
  1237 + margin-right: 100rpx;
  1238 + }
  1239 + .input{
  1240 + border-bottom: 1px solid #CFCFCF;
  1241 + }
  1242 + }
  1243 +
  1244 + }
  1245 + }
  1246 + }
  1247 + }
  1248 + .choose {
  1249 + width: 100%;
  1250 + background: #ffffff;
  1251 + border-radius: 12rpx;
  1252 + margin-top: 20rpx;
  1253 + padding: 40rpx 40rpx 112rpx 40rpx;
  1254 + box-sizing: border-box;
  1255 + .chooseItem {
  1256 + width: 100%;
  1257 + padding-bottom: 32rpx;
  1258 + border-bottom: 1px solid #e9e9e9;
  1259 + margin-bottom: 28rpx;
  1260 + }
  1261 + .chooseRes {
  1262 + font-size: 12px;
  1263 + color: #666666;
  1264 + }
  1265 + .itemsWrap {
  1266 + display: flex;
  1267 + flex-direction: row;
  1268 + flex-wrap: wrap;
  1269 + justify-content: flex-start;
  1270 + align-items: center;
  1271 + padding-top: 24rpx;
  1272 + .item1 {
  1273 + width: 64rpx;
  1274 + height: 64rpx;
  1275 + border-radius: 32rpx;
  1276 + margin: 0 36rpx 24rpx 0;
  1277 + transition: all 0.3s;
  1278 + border: 1px solid #ffffff;
  1279 + }
  1280 + .item2 {
  1281 + // width: 100rpx;
  1282 + padding: 0 30rpx;
  1283 + height: 60rpx;
  1284 + margin: 0 20rpx 20rpx 0;
  1285 + transition: all 0.3s;
  1286 + background: #f2f2f2;
  1287 + border-radius: 2px;
  1288 + border-radius: 2px;
  1289 + line-height: 60rpx;
  1290 + text-align: center;
  1291 + color: #666666;
  1292 + font-size: 12px;
  1293 + }
  1294 + .active1 {
  1295 + opacity: 0.7;
  1296 + border: 1px solid #ff6b4a;
  1297 + }
  1298 + .active2 {
  1299 + background: rgba(255, 107, 74, 0.15);
  1300 + color: #ff6b4a;
  1301 + }
  1302 + }
  1303 + }
  1304 + .button {
  1305 + width: 100%;
  1306 + height: 112rpx;
  1307 + background-color: #ff6b4a;
  1308 + font-size: 16px;
  1309 + color: #ffffff;
  1310 + line-height: 112rpx;
  1311 + text-align: center;
  1312 + position: sticky;
  1313 + bottom: 0rpx;
  1314 + left: 0rpx;
  1315 + z-index: 9999;
  1316 + }
  1317 + }
  1318 + /* sheet弹窗 */
  1319 + .sheet{
  1320 + width: 100%;
  1321 + height: 100%;
  1322 + position: fixed;
  1323 + top: 150%;
  1324 + left: 0upx;
  1325 + bottom: 0upx;
  1326 + right: 0upx;
  1327 + background:rgba(0,0,0,0.3);
  1328 + z-index: 10000;
  1329 + }
  1330 +
  1331 + /* 显示时候的动画默认0.5s */
  1332 + .sheetView{
  1333 + width: 100%;
  1334 + height: 0upx;
  1335 + position: absolute;
  1336 + bottom: 0upx;
  1337 + background: white;
  1338 + z-index: 10001;
  1339 + transition: all 0.5s;
  1340 + }
  1341 + .sheetShow{
  1342 + top:0upx !important;
  1343 + }
  1344 + /* 关闭时的动画，时间自己可以设置0.5s*/
  1345 + .sheeHide{
  1346 + top:120% !important;
  1347 + transition: all 0.5s;
  1348 + }
  1349 +
  1350 + /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
  1351 + .sheetView_active{
  1352 + height: 1042upx;
  1353 + }
  1354 +
  1355 +</style>
... ...
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @7614465
... ... @@ -3,11 +3,13 @@
3 3 class="card"
4 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 5 >
6   - <easy-loadimage mode="widthFix"
7   - :scroll-top="scrollTop"
8   - :image-src="goods.imgurl?goods.imgurl:goods.pic"
9   - :viewHeight="viewHeight"></easy-loadimage>
10   -<!-- <image
  6 + <easy-loadimage
  7 + mode="widthFix"
  8 + :scroll-top="scrollTop"
  9 + :image-src="goods.imgurl?goods.imgurl:goods.pic"
  10 + :viewHeight="viewHeight"
  11 + ></easy-loadimage>
  12 + <!-- <image
11 13 mode="widthFix"
12 14 :src="goods.imgurl?goods.imgurl:goods.pic"
13 15 ></image> -->
... ... @@ -29,7 +31,7 @@
29 31 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30 32 // const MockData = require('@/static/easy-loadimage/mock-data.json')
31 33 export default {
32   - components:{easyLoadimage},
  34 + components: { easyLoadimage },
33 35 props: {
34 36 /**
35 37 * 商品数据
... ... @@ -44,22 +46,22 @@ export default {
44 46 trade_num: String,
45 47 goodType: String,
46 48 },
47   - scrollTop:Number,
48   - viewHeight:Number,
  49 + scrollTop: Number,
  50 + viewHeight: Number,
49 51 },
50 52 created () {
51 53 },
52 54 data () {
53 55 return {
54   -
  56 +
55 57 }
56 58 },
57 59  
58 60 methods: {
59 61 toGoods (id, skId) {
60   - console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
  62 + console.log('---', '../details/details?pid=' + id + '&sk_id=' + skId)
61 63 uni.navigateTo({
62   - url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
  64 + url: '../details/details?pid=' + id + '&sk_id=' + skId,
63 65 success: res => {},
64 66 fail: () => {},
65 67 complete: () => {},
... ... @@ -70,15 +72,15 @@ export default {
70 72 </script>
71 73  
72 74 <style lang="scss">
73   -
74 75 image {
75 76 width: 100%;
76 77 height: 120rpx;
77 78 }
78 79 .name {
79 80 width: 92%;
80   - height: 54rpx;
  81 + height: 84rpx;
81 82 padding: 5px 4%;
  83 + box-sizing: border-box;
82 84 display: -webkit-box;
83 85 -webkit-box-orient: vertical;
84 86 -webkit-line-clamp: 2;
... ...
src/components/EasyLoadimage/EasyLoadimage.vue
Diff comments   View file @7614465
... ... @@ -57,7 +57,8 @@ export default{
57 57 loadImg:false,
58 58 showImg:false,
59 59 isLoadError:false,
60   - showTransition:false
  60 + showTransition:false,
  61 + defaultImg: '/static/easy-loadimage/loading.gif'
61 62 }
62 63 },
63 64 methods:{
... ... @@ -99,9 +100,13 @@ export default{
99 100 </script>
100 101  
101 102 <style scoped>
  103 + .easy-loadimage{
  104 + min-height: 160rpx;
  105 + }
102 106 /* 官方优化图片tips */
103 107 image{
104 108 will-change: transform
  109 +
105 110 }
106 111 /* 渐变过渡效果处理 */
107 112 image.origin-img{
... ...
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @7614465
... ... @@ -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/SimpleAddress/SimpleAddress.vue
Diff comments   View file @7614465
... ... @@ -221,6 +221,7 @@ export default {
221 221 },
222 222 methods: {
223 223 init () {
  224 + console.log(this.pickerValueDefault)
224 225 this.handPickValueDefault() // 对 pickerValueDefault 做兼容处理
225 226 this.provinceDataList = provinceData
226 227 this.cityDataList = cityData[this.pickerValueDefault[0]]
... ...
src/components/quick-skeleton/quick-skeleton.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,171 @@
  1 +<template>
  2 +<view v-show="show" :style="{width: systemInfo.width + 'px', height: systemInfo.height + 'px', backgroundColor: bgcolor, position: 'absolute', left: 0, top: 0, zIndex: 9998, overflow: 'hidden'}">
  3 + <view v-for="(item,rect_idx) in skeletonRectLists" :key="rect_idx + 'rect'" :class="[loading == 'chiaroscuro' ? 'chiaroscuro' : '']" :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
  4 + <view v-for="(item,circle_idx) in skeletonCircleLists" :key="circle_idx + 'circle'" :class="loading == 'chiaroscuro' ? 'chiaroscuro' : ''" :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: 'rgb(194, 207, 214)', borderRadius: item.width + 'px', position: 'absolute', left: item.left + 'px', top: item.top + 'px'}"></view>
  5 +
  6 + <view class="spinbox" v-if="loading == 'spin'">
  7 + <view class="spin"></view>
  8 + </view>
  9 +</view>
  10 +</template>
  11 +
  12 +<script>
  13 + export default {
  14 + name: "skeleton",
  15 + props: {
  16 + bgcolor: {
  17 + type: String,
  18 + value: '#FFF'
  19 + },
  20 + selector: {
  21 + type: String,
  22 + value: 'skeleton'
  23 + },
  24 + loading: {
  25 + type: String,
  26 + value: 'spin'
  27 + },
  28 + show: {
  29 + type: Boolean,
  30 + value: false
  31 + }
  32 + },
  33 + data() {
  34 + return {
  35 + loadingAni: ['spin', 'chiaroscuro'],
  36 + systemInfo: {},
  37 + skeletonRectLists: [],
  38 + skeletonCircleLists: []
  39 + }
  40 + },
  41 + watch: {
  42 + show() {
  43 + this.attachedAction();
  44 + this.readyAction();
  45 + }
  46 + },
  47 + methods: {
  48 + attachedAction: function(){
  49 + //默认的首屏宽高，防止内容闪现
  50 + const systemInfo = uni.getSystemInfoSync();
  51 + this.systemInfo = {
  52 + width: systemInfo.windowWidth,
  53 + height: systemInfo.windowHeight
  54 + };
  55 + console.log(this.systemInfo)
  56 + this.loading = this.loadingAni.includes(this.loading) ? this.loading : 'spin';
  57 + },
  58 + readyAction: function(){
  59 + const that = this;
  60 + //绘制背景
  61 + uni.createSelectorQuery().selectAll(`.${this.selector}`).boundingClientRect().exec(function(res){
  62 +
  63 + that.systemInfo.height = res[0][0].height + res[0][0].top;
  64 + });
  65 +
  66 + //绘制矩形
  67 + this.rectHandle();
  68 +
  69 + //绘制圆形
  70 + this.radiusHandle();
  71 + },
  72 + rectHandle: function(){
  73 + const that = this;
  74 +
  75 + //绘制不带样式的节点
  76 + uni.createSelectorQuery().selectAll(`.${this.selector}-rect`).boundingClientRect().exec(function(res){
  77 + that.skeletonRectLists = res[0];
  78 + });
  79 +
  80 + },
  81 + radiusHandle(){
  82 + const that = this;
  83 +
  84 + uni.createSelectorQuery().selectAll(`.${this.selector}-radius`).boundingClientRect().exec(function(res){
  85 + that.skeletonCircleLists = res[0];
  86 + });
  87 + }
  88 + }
  89 + }
  90 +</script>
  91 +
  92 +<style>
  93 +.spinbox{
  94 + position: fixed;
  95 + display: flex;
  96 + justify-content: center;
  97 + align-items: center;
  98 + height: 100%;
  99 + width: 100%;
  100 + z-index: 9999
  101 +}
  102 +.spin {
  103 + display: inline-block;
  104 + width: 64rpx;
  105 + height: 64rpx;
  106 +}
  107 +.spin:after {
  108 + content: " ";
  109 + display: block;
  110 + width: 46rpx;
  111 + height: 46rpx;
  112 + margin: 1rpx;
  113 + border-radius: 50%;
  114 + border: 5rpx solid #409eff;
  115 + border-color: #409eff transparent #409eff transparent;
  116 + animation: spin 1.2s linear infinite;
  117 +}
  118 +@keyframes spin {
  119 + 0% {
  120 + transform: rotate(0deg);
  121 + }
  122 + 100% {
  123 + transform: rotate(360deg);
  124 + }
  125 +}
  126 +
  127 +.chiaroscuro{
  128 + width: 100%;
  129 + height: 100%;
  130 + background: rgb(194, 207, 214);
  131 + animation-duration: 2s;
  132 + animation-name: blink;
  133 + animation-iteration-count: infinite;
  134 +}
  135 +
  136 +@keyframes blink {
  137 + 0% {
  138 + opacity: .4;
  139 + }
  140 + 50% {
  141 + opacity: 1;
  142 + }
  143 + 100% {
  144 + opacity: .4;
  145 + }
  146 +}
  147 +
  148 +@keyframes flush {
  149 + 0% {
  150 + left: -100%;
  151 + }
  152 + 50% {
  153 + left: 0;
  154 + }
  155 + 100% {
  156 + left: 100%;
  157 + }
  158 +}
  159 +.shine {
  160 + animation: flush 2s linear infinite;
  161 + position: absolute;
  162 + top: 0;
  163 + bottom: 0;
  164 + width: 100%;
  165 + background: linear-gradient(to left,
  166 + rgba(255, 255, 255, 0) 0%,
  167 + rgba(255, 255, 255, .85) 50%,
  168 + rgba(255, 255, 255, 0) 100%
  169 + )
  170 +}
  171 +</style>
... ...
src/components/sl-filter/filter-view.vue
Diff comments   View file @7614465
... ... @@ -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 @7614465
... ... @@ -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 @7614465
... ... @@ -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 @7614465
... ... @@ -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>
... ...
src/components/uni-popup/popup.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,25 @@
  1 +// import message from './message.js'
  2 +// 定义 type 类型:弹出类型：top/bottom/center
  3 +const config = {
  4 + // 顶部弹出
  5 + top: 'top',
  6 + // 底部弹出
  7 + bottom: 'bottom',
  8 + // 居中弹出
  9 + center: 'center',
  10 + // 消息提示
  11 + message: 'top',
  12 + // 对话框
  13 + dialog: 'center',
  14 + // 分享
  15 + share: 'bottom',
  16 +}
  17 +
  18 +export default {
  19 + data() {
  20 + return {
  21 + config: config,
  22 + }
  23 + },
  24 + // mixins: [message],
  25 +}
... ...
src/components/uni-popup/uni-popup-post.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,207 @@
  1 +<template>
  2 + <view class="uni-popup-post">
  3 + <image
  4 + class="uni_post_img"
  5 + :src="postUrl"
  6 + />
  7 + <view
  8 + @tap="saveAndClose"
  9 + class="uni_post_button_box"
  10 + >
  11 + 保存图片
  12 + </view>
  13 + </view>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + name: 'UniPopupPost',
  19 + props: {
  20 + postUrl: {
  21 + type: String,
  22 + default: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png',
  23 + },
  24 + },
  25 + inject: ['popup'],
  26 + data() {
  27 + return {}
  28 + },
  29 + created() {
  30 + console.log('dada', this)
  31 + },
  32 + methods: {
  33 + // 保存图片并关闭窗口
  34 + saveAndClose() {
  35 + // 获取用户保存相册权限
  36 + const scope = 'scope.writePhotosAlbum'
  37 + const that = this
  38 + uni.getSetting({
  39 + success(res) {
  40 + console.log('获取用户保存相册权限', res)
  41 + if (!res.authSetting[scope]) {
  42 + uni.authorize({
  43 + scope,
  44 + success() {
  45 + console.log('获取用户保存相册权限---->', '授权成功')
  46 + // 保存到相册
  47 + uni.showLoading({
  48 + title: '保存中',
  49 + })
  50 + that.saveImage()
  51 + },
  52 + fail() {
  53 + console.log('获取用户保存相册权限---->', '授权失败')
  54 + that.secondGetPhoteAuthor()
  55 + },
  56 + })
  57 + } else {
  58 + console.log('拥有授权权限')
  59 + // 保存到相册
  60 + uni.showLoading({
  61 + title: '保存中',
  62 + })
  63 + that.saveImage()
  64 + }
  65 +
  66 + that.popup.close()
  67 + },
  68 + fail(res) {
  69 + console.log('授权失败------>', res)
  70 + uni.showToast({
  71 + title: '保存失败',
  72 + icon: 'none',
  73 + duration: 2000,
  74 + })
  75 + },
  76 + })
  77 + },
  78 + // 保存到相册
  79 + saveImage() {
  80 + const that = this
  81 + uni.getImageInfo({
  82 + src: that.postUrl,
  83 + success(res) {
  84 + console.log('图片读取是否可行', res)
  85 + uni.saveImageToPhotosAlbum({
  86 + filePath: res.path,
  87 + success() {
  88 + uni.hideLoading()
  89 + uni.showToast({
  90 + title: '已保存到相册',
  91 + icon: 'none',
  92 + duration: 2000,
  93 + })
  94 + },
  95 + fail(err) {
  96 + console.log('用户拒绝', err)
  97 + if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
  98 + console.log('当用户拒绝，再次发起授权')
  99 + that.secondGetPhoteAuthor()
  100 + } else if (err.errMsg === 'saveImageToPhotosAlbum:fail cancel') {
  101 + uni.showToast({
  102 + title: '已取消保存',
  103 + icon: 'none',
  104 + duration: 2000,
  105 + })
  106 + uni.hideLoading()
  107 + } else {
  108 + uni.showToast({
  109 + title: '请截屏保存分享',
  110 + icon: 'none',
  111 + duration: 2000,
  112 + })
  113 + uni.hideLoading()
  114 + }
  115 + },
  116 + })
  117 + },
  118 + fail(res) {
  119 + console.log('授权失败----->', res)
  120 + uni.hideLoading()
  121 + uni.showToast({
  122 + title: '保存失败',
  123 + icon: 'none',
  124 + duration: 2000,
  125 + })
  126 + },
  127 + })
  128 + },
  129 + // 二次请求授权
  130 + secondGetPhoteAuthor() {
  131 + const that = this
  132 + uni.showModal({
  133 + title: '保存海报',
  134 + content: '需要您提供保存相册权限',
  135 + success: (res) => {
  136 + if (res.confirm) {
  137 + uni.openSetting({
  138 + success(settingdata) {
  139 + console.log('settingdata 二次弹窗获取', settingdata)
  140 + if (settingdata.authSetting['scope.writePhotosAlbum']) {
  141 + console.log('二次弹窗获取---->', '获取 相册 权限成功，给出再次点击图片保存到相册的提示。')
  142 + uni.showLoading({
  143 + title: '保存中',
  144 + })
  145 + that.saveImage()
  146 + } else {
  147 + uni.showToast({
  148 + title: '保存失败',
  149 + icon: 'none',
  150 + duration: 2000,
  151 + })
  152 + console.log('二次弹窗获取', '获取 相册 权限失败，给出不给权限就无法正常使用的提示')
  153 + }
  154 + },
  155 + })
  156 + } else {
  157 + uni.showToast({
  158 + title: '保存失败',
  159 + icon: 'none',
  160 + duration: 2000,
  161 + })
  162 + }
  163 + },
  164 + fail(err) {
  165 + uni.showToast({
  166 + title: '保存失败',
  167 + icon: 'none',
  168 + duration: 2000,
  169 + })
  170 + console.log('再次失败', err)
  171 + },
  172 + })
  173 + },
  174 + },
  175 +}
  176 +</script>
  177 +<style lang="scss" scoped>
  178 +.uni-popup-post {
  179 + border-radius: 8px 8px 0px 0px;
  180 + display: flex;
  181 + flex-direction: column;
  182 + justify-content: space-between;
  183 + align-items: center;
  184 +}
  185 +
  186 +.uni_post_img {
  187 + width: 690rpx;
  188 + height: 466.667px;
  189 + margin-top: -180rpx;
  190 +}
  191 +
  192 +.uni_post_button_box {
  193 + height: 112rpx;
  194 + line-height: 112rpx;
  195 + background-color: #ff6b4a;
  196 + border-radius: 4px;
  197 + width: 350px;
  198 + color: #fff;
  199 + text-align: center;
  200 + margin-top: 44rpx;
  201 + font-family: PingFangSC-Medium;
  202 + font-size: 14px;
  203 + color: #ffffff;
  204 + letter-spacing: -0.26px;
  205 + text-align: center;
  206 +}
  207 +</style>
... ...
src/components/uni-popup/uni-popup-share.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,185 @@
  1 +<template>
  2 + <view class="uni-popup-share">
  3 + <!-- <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view> -->
  4 + <view class="uni-share-content">
  5 + <view class="uni-share-content-box">
  6 + <button
  7 + class="uni-share-content-item"
  8 + v-for="(item,index) in bottomData"
  9 + :key="index"
  10 + :open-type="item.name === 'friend' ? 'share': ''"
  11 + @click.stop="select(item,index)"
  12 + >
  13 + <image
  14 + class="uni-share-image"
  15 + :src="item.icon"
  16 + mode="aspectFill"
  17 + ></image>
  18 + <view class="uni-share-text">{{item.text}}</view>
  19 + </button>
  20 + </view>
  21 + </view>
  22 + <view
  23 + @tap="close"
  24 + class="uni-share-button-box"
  25 + >
  26 + 取消
  27 + </view>
  28 + </view>
  29 +</template>
  30 +
  31 +<script>
  32 +export default {
  33 + name: 'UniPopupShare',
  34 + props: {
  35 + title: {
  36 + type: String,
  37 + default: '分享到',
  38 + },
  39 + },
  40 + inject: ['popup'],
  41 + data() {
  42 + return {
  43 + bottomData: [{
  44 + text: '推荐到好物圈',
  45 + icon: '/static/img/share/recommend.png',
  46 + name: 'recommend',
  47 + }, {
  48 + text: '转发给朋友/群',
  49 + icon: '/static/img/share/friend.png',
  50 + name: 'friend',
  51 + }, {
  52 + text: '生成海报',
  53 + icon: '/static/img/share/poster.png',
  54 + name: 'poster',
  55 + },
  56 + ],
  57 + }
  58 + },
  59 + created() {},
  60 + methods: {
  61 + /**
  62 + * 选择内容
  63 + */
  64 + select(item, index) {
  65 + this.$emit('select', {
  66 + item,
  67 + index,
  68 + }, () => {
  69 + this.popup.close()
  70 + })
  71 + },
  72 + /**
  73 + * 关闭窗口
  74 + */
  75 + close() {
  76 + this.popup.close()
  77 + },
  78 + },
  79 +}
  80 +</script>
  81 +<style lang="scss" scoped>
  82 +.uni-popup-share {
  83 + background-color: #fff;
  84 + border-radius: 8px 8px 0px 0px;
  85 +}
  86 +.uni-share-title {
  87 + /* #ifndef APP-NVUE */
  88 + display: flex;
  89 + /* #endif */
  90 + flex-direction: row;
  91 + align-items: center;
  92 + justify-content: center;
  93 + height: 40px;
  94 +}
  95 +.uni-share-title-text {
  96 + font-size: 14px;
  97 + color: #666;
  98 +}
  99 +.uni-share-content {
  100 + /* #ifndef APP-NVUE */
  101 + display: flex;
  102 + /* #endif */
  103 + flex-direction: row;
  104 + justify-content: center;
  105 + padding-top: 10px;
  106 +}
  107 +
  108 +.uni-share-content-box {
  109 + /* #ifndef APP-NVUE */
  110 + display: flex;
  111 + /* #endif */
  112 +
  113 + flex-direction: column;
  114 + justify-content: space-between;
  115 + width: 360px;
  116 +}
  117 +
  118 +.uni-share-content-item {
  119 + /* #ifndef APP-NVUE */
  120 + display: flex;
  121 + /* #endif */
  122 + flex-direction: row;
  123 + flex-wrap: wrap;
  124 + padding: 10px 0;
  125 + align-items: center;
  126 + border-bottom: 1px solid #f2f2f2;
  127 +
  128 + background-color: #fff;
  129 + font-family: PingFangSC-Regular;
  130 + font-size: 16px;
  131 + color: #333333;
  132 + letter-spacing: -0.3px;
  133 + margin: 0;
  134 + &::after {
  135 + border: 0;
  136 + }
  137 +}
  138 +
  139 +.uni-share-content-item:active {
  140 + background-color: #f5f5f5;
  141 +}
  142 +
  143 +.uni-share-image {
  144 + width: 84rpx;
  145 + height: 84rpx;
  146 + vertical-align: middle;
  147 + margin-left: 40rpx;
  148 +}
  149 +
  150 +.uni-share-text {
  151 + font-family: PingFangSC-Regular;
  152 + font-size: 16px;
  153 + color: #3b4144;
  154 + margin-left: 20rpx;
  155 +}
  156 +// .share_button {
  157 +// border: none;
  158 +// }
  159 +
  160 +.uni-share-button-box {
  161 + /* #ifndef APP-NVUE */
  162 + // display: flex;
  163 + /* #endif */
  164 + // flex-direction: row;
  165 + // padding: 10px 15px;
  166 + height: 100rpx;
  167 + font-family: PingFangSC-Regular;
  168 + font-size: 16px;
  169 + color: #333333;
  170 + letter-spacing: -0.3px;
  171 + text-align: center;
  172 + line-height: 100rpx;
  173 +}
  174 +
  175 +.uni-share-button {
  176 + flex: 1;
  177 + border-radius: 50px;
  178 + color: #666;
  179 + font-size: 16px;
  180 +}
  181 +
  182 +.uni-share-button::after {
  183 + border-radius: 50px;
  184 +}
  185 +</style>
... ...
src/components/uni-popup/uni-popup.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,313 @@
  1 +<template>
  2 + <view
  3 + v-if="showPopup"
  4 + class="uni-popup"
  5 + :class="[popupstyle]"
  6 + @touchmove.stop.prevent="clear"
  7 + >
  8 + <uni-transition
  9 + v-if="maskShow"
  10 + :mode-class="['fade']"
  11 + :styles="maskClass"
  12 + :duration="duration"
  13 + :show="showTrans"
  14 + @click="onTap"
  15 + />
  16 + <uni-transition
  17 + :mode-class="ani"
  18 + :styles="transClass"
  19 + :duration="duration"
  20 + :show="showTrans"
  21 + @click="onTap"
  22 + >
  23 + <view
  24 + class="uni-popup__wrapper-box"
  25 + @click.stop="clear"
  26 + >
  27 + <slot />
  28 + </view>
  29 + </uni-transition>
  30 + </view>
  31 +</template>
  32 +
  33 +<script>
  34 +import uniTransition from '../uni-transition/uni-transition.vue'
  35 +import popup from './popup.js'
  36 +/**
  37 + * PopUp 弹出层
  38 + * @description 弹出层组件，为了解决遮罩弹层的问题
  39 + * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  40 + * @property {String} type = [top|center|bottom] 弹出方式
  41 + * @value top 顶部弹出
  42 + * @value center 中间弹出
  43 + * @value bottom 底部弹出
  44 + * @value message 消息提示
  45 + * @value dialog 对话框
  46 + * @value share 底部分享示例
  47 + * @property {Boolean} animation = [ture|false] 是否开启动画
  48 + * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
  49 + * @event {Function} change 打开关闭弹窗触发，e={show: false}
  50 + */
  51 +
  52 +export default {
  53 + name: 'UniPopup',
  54 + components: {
  55 + uniTransition,
  56 + },
  57 + props: {
  58 + // 开启动画
  59 + animation: {
  60 + type: Boolean,
  61 + default: true,
  62 + },
  63 + // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
  64 + // message: 消息提示 ; dialog : 对话框
  65 + type: {
  66 + type: String,
  67 + default: 'center',
  68 + },
  69 + // maskClick
  70 + maskClick: {
  71 + type: Boolean,
  72 + default: true,
  73 + },
  74 + },
  75 + provide() {
  76 + return {
  77 + popup: this,
  78 + }
  79 + },
  80 + mixins: [popup],
  81 + watch: {
  82 + /**
  83 + * 监听type类型
  84 + */
  85 + type: {
  86 + handler: function(newVal) {
  87 + this[this.config[newVal]]()
  88 + },
  89 + immediate: true,
  90 + },
  91 + /**
  92 + * 监听遮罩是否可点击
  93 + * @param {Object} val
  94 + */
  95 + maskClick(val) {
  96 + this.mkclick = val
  97 + },
  98 + },
  99 + data() {
  100 + return {
  101 + duration: 300,
  102 + ani: [],
  103 + showPopup: false,
  104 + showTrans: false,
  105 + maskClass: {
  106 + position: 'fixed',
  107 + bottom: 0,
  108 + top: 0,
  109 + left: 0,
  110 + right: 0,
  111 + backgroundColor: 'rgba(0, 0, 0, 0.4)',
  112 + },
  113 + transClass: {
  114 + position: 'fixed',
  115 + left: 0,
  116 + right: 0,
  117 + },
  118 + maskShow: true,
  119 + mkclick: true,
  120 + popupstyle: 'top',
  121 + }
  122 + },
  123 + created() {
  124 + this.mkclick = this.maskClick
  125 + if (this.animation) {
  126 + this.duration = 300
  127 + } else {
  128 + this.duration = 0
  129 + }
  130 + },
  131 + methods: {
  132 + clear(e) {
  133 + // TODO nvue 取消冒泡
  134 + e.stopPropagation()
  135 + },
  136 + open() {
  137 + this.showPopup = true
  138 + this.$nextTick(() => {
  139 + new Promise(resolve => {
  140 + clearTimeout(this.timer)
  141 + this.timer = setTimeout(() => {
  142 + this.showTrans = true
  143 + // fixed by mehaotian 兼容 app 端
  144 + this.$nextTick(() => {
  145 + resolve()
  146 + })
  147 + }, 50)
  148 + }).then(res => {
  149 + // 自定义打开事件
  150 + clearTimeout(this.msgtimer)
  151 + this.msgtimer = setTimeout(() => {
  152 + this.customOpen && this.customOpen()
  153 + }, 100)
  154 + this.$emit('change', {
  155 + show: true,
  156 + type: this.type,
  157 + })
  158 + })
  159 + })
  160 + },
  161 + close(type) {
  162 + this.showTrans = false
  163 + this.$nextTick(() => {
  164 + this.$emit('change', {
  165 + show: false,
  166 + type: this.type,
  167 + })
  168 + clearTimeout(this.timer)
  169 + // 自定义关闭事件
  170 + this.customOpen && this.customClose()
  171 + this.timer = setTimeout(() => {
  172 + this.showPopup = false
  173 + }, 300)
  174 + })
  175 + },
  176 + onTap() {
  177 + if (!this.mkclick) return
  178 + this.close()
  179 + },
  180 + /**
  181 + * 顶部弹出样式处理
  182 + */
  183 + top() {
  184 + this.popupstyle = 'top'
  185 + this.ani = ['slide-top']
  186 + this.transClass = {
  187 + position: 'fixed',
  188 + left: 0,
  189 + right: 0,
  190 + }
  191 + },
  192 + /**
  193 + * 底部弹出样式处理
  194 + */
  195 + bottom() {
  196 + this.popupstyle = 'bottom'
  197 + this.ani = ['slide-bottom']
  198 + this.transClass = {
  199 + position: 'fixed',
  200 + left: 0,
  201 + right: 0,
  202 + bottom: 0,
  203 + }
  204 + },
  205 + /**
  206 + * 中间弹出样式处理
  207 + */
  208 + center() {
  209 + this.popupstyle = 'center'
  210 + this.ani = ['zoom-out', 'fade']
  211 + this.transClass = {
  212 + position: 'fixed',
  213 + /* #ifndef APP-NVUE */
  214 + display: 'flex',
  215 + flexDirection: 'column',
  216 + /* #endif */
  217 + bottom: 0,
  218 + left: 0,
  219 + right: 0,
  220 + top: 0,
  221 + justifyContent: 'center',
  222 + alignItems: 'center',
  223 + }
  224 + },
  225 + },
  226 +}
  227 +</script>
  228 +<style lang="scss" scoped>
  229 +.uni-popup {
  230 + position: fixed;
  231 + /* #ifndef APP-NVUE */
  232 + z-index: 99;
  233 + /* #endif */
  234 +}
  235 +
  236 +.uni-popup__mask {
  237 + position: absolute;
  238 + top: 0;
  239 + bottom: 0;
  240 + left: 0;
  241 + right: 0;
  242 + background-color: $uni-bg-color-mask;
  243 + opacity: 0;
  244 +}
  245 +
  246 +.mask-ani {
  247 + transition-property: opacity;
  248 + transition-duration: 0.2s;
  249 +}
  250 +
  251 +.uni-top-mask {
  252 + opacity: 1;
  253 +}
  254 +
  255 +.uni-bottom-mask {
  256 + opacity: 1;
  257 +}
  258 +
  259 +.uni-center-mask {
  260 + opacity: 1;
  261 +}
  262 +
  263 +.uni-popup__wrapper {
  264 + /* #ifndef APP-NVUE */
  265 + display: block;
  266 + /* #endif */
  267 + position: absolute;
  268 +}
  269 +
  270 +.top {
  271 + /* #ifdef H5 */
  272 + top: var(--window-top);
  273 + /* #endif */
  274 + /* #ifndef H5 */
  275 + top: 0;
  276 + /* #endif */
  277 +}
  278 +
  279 +.bottom {
  280 + bottom: 0;
  281 +}
  282 +
  283 +.uni-popup__wrapper-box {
  284 + /* #ifndef APP-NVUE */
  285 + display: block;
  286 + /* #endif */
  287 + position: relative;
  288 + /* iphonex 等安全区设置，底部安全区适配 */
  289 + /* #ifndef APP-NVUE */
  290 + padding-bottom: constant(safe-area-inset-bottom);
  291 + padding-bottom: env(safe-area-inset-bottom);
  292 + /* #endif */
  293 +}
  294 +
  295 +.content-ani {
  296 + // transition: transform 0.3s;
  297 + transition-property: transform, opacity;
  298 + transition-duration: 0.2s;
  299 +}
  300 +
  301 +.uni-top-content {
  302 + transform: translateY(0);
  303 +}
  304 +
  305 +.uni-bottom-content {
  306 + transform: translateY(0);
  307 +}
  308 +
  309 +.uni-center-content {
  310 + transform: scale(1);
  311 + opacity: 1;
  312 +}
  313 +</style>
... ...
src/components/uni-swipe-action-item/bindingx.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,245 @@
  1 +const BindingX = uni.requireNativePlugin('bindingx');
  2 +const dom = uni.requireNativePlugin('dom');
  3 +const animation = uni.requireNativePlugin('animation');
  4 +
  5 +export default {
  6 + data() {
  7 + return {
  8 + right: 0,
  9 + button: [],
  10 + preventGesture: false
  11 + }
  12 + },
  13 +
  14 + watch: {
  15 + show(newVal) {
  16 + if (!this.position || JSON.stringify(this.position) === '{}') return;
  17 + if (this.autoClose) return
  18 + if (this.isInAnimation) return
  19 + if (newVal) {
  20 + this.open()
  21 + } else {
  22 + this.close()
  23 + }
  24 + },
  25 + },
  26 + created() {
  27 + if (this.swipeaction.children !== undefined) {
  28 + this.swipeaction.children.push(this)
  29 + }
  30 + },
  31 + mounted() {
  32 + this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
  33 + this.selector = this.getEl(this.$refs['selector-content-hock']);
  34 + this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
  35 + this.position = {}
  36 + this.x = 0
  37 + setTimeout(() => {
  38 + this.getSelectorQuery()
  39 + }, 200)
  40 + },
  41 + beforeDestroy() {
  42 + if (this.timing) {
  43 + BindingX.unbind({
  44 + token: this.timing.token,
  45 + eventType: 'timing'
  46 + })
  47 + }
  48 + if (this.eventpan) {
  49 + BindingX.unbind({
  50 + token: this.eventpan.token,
  51 + eventType: 'pan'
  52 + })
  53 + }
  54 + this.swipeaction.children.forEach((item, index) => {
  55 + if (item === this) {
  56 + this.swipeaction.children.splice(index, 1)
  57 + }
  58 + })
  59 + },
  60 + methods: {
  61 + onClick(index, item) {
  62 + this.$emit('click', {
  63 + content: item,
  64 + index
  65 + })
  66 + },
  67 + touchstart(e) {
  68 + if (this.isInAnimation) return
  69 + if (this.stop) return
  70 + this.stop = true
  71 + if (this.autoClose) {
  72 + this.swipeaction.closeOther(this)
  73 + }
  74 + let endWidth = this.right
  75 + let boxStep = `(x+${this.x})`
  76 + let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
  77 +
  78 + let props = [{
  79 + element: this.selector,
  80 + property: 'transform.translateX',
  81 + expression: pageX
  82 + }]
  83 +
  84 + let left = 0
  85 + for (let i = 0; i < this.options.length; i++) {
  86 + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  87 + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  88 + let moveMix = endWidth - left
  89 + left += this.button[i].width
  90 + let step = `(${this.x}+x)/${endWidth}`
  91 + let moveX = `(${step}) * ${moveMix}`
  92 + let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
  93 + props.push({
  94 + element: buttonSelectors,
  95 + property: 'transform.translateX',
  96 + expression: pageButtonX
  97 + })
  98 + }
  99 +
  100 + this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
  101 + if (e.state === 'end') {
  102 + this.x = e.deltaX + this.x;
  103 + if (this.x < -endWidth) {
  104 + this.x = -endWidth
  105 + }
  106 + if (this.x > 0) {
  107 + this.x = 0
  108 + }
  109 + this.stop = false
  110 + this.bindTiming();
  111 + }
  112 + })
  113 + },
  114 + touchend(e) {
  115 + this.$nextTick(() => {
  116 + if (this.isopen && !this.isDrag && !this.isInAnimation) {
  117 + this.close()
  118 + }
  119 + })
  120 + },
  121 + bindTiming() {
  122 + if (this.isopen) {
  123 + this.move(this.x, -this.right)
  124 + } else {
  125 + this.move(this.x, -40)
  126 + }
  127 + },
  128 + move(left, value) {
  129 + if (left >= value) {
  130 + this.close()
  131 + } else {
  132 + this.open()
  133 + }
  134 + },
  135 + /**
  136 + * 开启swipe
  137 + */
  138 + open() {
  139 + this.animation(true)
  140 + },
  141 + /**
  142 + * 关闭swipe
  143 + */
  144 + close() {
  145 + this.animation(false)
  146 + },
  147 + /**
  148 + * 开启关闭动画
  149 + * @param {Object} type
  150 + */
  151 + animation(type) {
  152 + this.isDrag = true
  153 + let endWidth = this.right
  154 + let time = 200
  155 + this.isInAnimation = true;
  156 +
  157 + let exit = `t>${time}`;
  158 + let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
  159 + let props = [{
  160 + element: this.selector,
  161 + property: 'transform.translateX',
  162 + expression: translate_x_expression
  163 + }]
  164 +
  165 + let left = 0
  166 + for (let i = 0; i < this.options.length; i++) {
  167 + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  168 + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  169 + let moveMix = endWidth - left
  170 + left += this.button[i].width
  171 + let step = `${this.x}/${endWidth}`
  172 + let moveX = `(${step}) * ${moveMix}`
  173 + let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
  174 + props.push({
  175 + element: buttonSelectors,
  176 + property: 'transform.translateX',
  177 + expression: pageButtonX
  178 + })
  179 + }
  180 +
  181 + this.timing = BindingX.bind({
  182 + eventType: 'timing',
  183 + exitExpression: exit,
  184 + props: props
  185 + }, (e) => {
  186 + if (e.state === 'end' || e.state === 'exit') {
  187 + this.x = type ? -endWidth : 0
  188 + this.isInAnimation = false;
  189 +
  190 + this.isopen = this.isopen || false
  191 + if (this.isopen !== type) {
  192 + this.$emit('change', type)
  193 + }
  194 + this.isopen = type
  195 + this.isDrag = false
  196 + }
  197 + });
  198 + },
  199 + /**
  200 + * 绑定 BindingX
  201 + * @param {Object} anchor
  202 + * @param {Object} props
  203 + * @param {Object} fn
  204 + */
  205 + _bind(anchor, props, eventType, fn) {
  206 + return BindingX.bind({
  207 + anchor,
  208 + eventType,
  209 + props
  210 + }, (e) => {
  211 + typeof(fn) === 'function' && fn(e)
  212 + });
  213 + },
  214 + /**
  215 + * 获取ref
  216 + * @param {Object} el
  217 + */
  218 + getEl(el) {
  219 + return el.ref
  220 + },
  221 + /**
  222 + * 获取节点信息
  223 + */
  224 + getSelectorQuery() {
  225 + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  226 + if (this.position.content) return
  227 + this.position.content = data.size
  228 + })
  229 + for (let i = 0; i < this.options.length; i++) {
  230 + dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
  231 + if (!this.button) {
  232 + this.button = []
  233 + }
  234 + if (this.options.length === this.button.length) return
  235 + this.button.push(data.size)
  236 + this.right += data.size.width
  237 + if (this.autoClose) return
  238 + if (this.show) {
  239 + this.open()
  240 + }
  241 + })
  242 + }
  243 + }
  244 + }
  245 +}
... ...
src/components/uni-swipe-action-item/index.wxs
Diff comments   View file @7614465
... ... @@ -0,0 +1,204 @@
  1 +/**
  2 + * 监听页面内值的变化,主要用于动态开关swipe-action
  3 + * @param {Object} newValue
  4 + * @param {Object} oldValue
  5 + * @param {Object} ownerInstance
  6 + * @param {Object} instance
  7 + */
  8 +function sizeReady(newValue, oldValue, ownerInstance, instance) {
  9 + var state = instance.getState()
  10 + state.position = JSON.parse(newValue)
  11 + if (!state.position || state.position.length === 0) return
  12 + var show = state.position[0].show
  13 + state.left = state.left || state.position[0].left;
  14 + // 通过用户变量,开启或关闭
  15 + if (show) {
  16 + openState(true, instance, ownerInstance)
  17 + } else {
  18 + openState(false, instance, ownerInstance)
  19 + }
  20 +}
  21 +
  22 +/**
  23 + * 开始触摸操作
  24 + * @param {Object} e
  25 + * @param {Object} ins
  26 + */
  27 +function touchstart(e, ins) {
  28 + var instance = e.instance;
  29 + var state = instance.getState();
  30 + var pageX = e.touches[0].pageX;
  31 + // 开始触摸时移除动画类
  32 + instance.removeClass('ani');
  33 + var owner = ins.selectAllComponents('.button-hock')
  34 + for (var i = 0; i < owner.length; i++) {
  35 + owner[i].removeClass('ani');
  36 + }
  37 + // state.position = JSON.parse(instance.getDataset().position);
  38 + state.left = state.left || state.position[0].left;
  39 + // 获取最终按钮组的宽度
  40 + state.width = pageX - state.left;
  41 + ins.callMethod('closeSwipe')
  42 +}
  43 +
  44 +/**
  45 + * 开始滑动操作
  46 + * @param {Object} e
  47 + * @param {Object} ownerInstance
  48 + */
  49 +function touchmove(e, ownerInstance) {
  50 + var instance = e.instance;
  51 + var disabled = instance.getDataset().disabled
  52 + var state = instance.getState()
  53 + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  54 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  55 +
  56 + if (disabled) return
  57 + var pageX = e.touches[0].pageX;
  58 + move(pageX - state.width, instance, ownerInstance)
  59 +}
  60 +
  61 +/**
  62 + * 结束触摸操作
  63 + * @param {Object} e
  64 + * @param {Object} ownerInstance
  65 + */
  66 +function touchend(e, ownerInstance) {
  67 + var instance = e.instance;
  68 + var disabled = instance.getDataset().disabled
  69 + var state = instance.getState()
  70 +
  71 + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  72 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  73 +
  74 + if (disabled) return
  75 + // 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  76 + // fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
  77 + moveDirection(state.left, -40, instance, ownerInstance)
  78 +}
  79 +
  80 +/**
  81 + * 设置移动距离
  82 + * @param {Object} value
  83 + * @param {Object} instance
  84 + * @param {Object} ownerInstance
  85 + */
  86 +function move(value, instance, ownerInstance) {
  87 + var state = instance.getState()
  88 + // 获取可滑动范围
  89 + var x = Math.max(-state.position[1].width, Math.min((value), 0));
  90 + state.left = x;
  91 + instance.setStyle({
  92 + transform: 'translateX(' + x + 'px)',
  93 + '-webkit-transform': 'translateX(' + x + 'px)'
  94 + })
  95 + // 折叠按钮动画
  96 + buttonFold(x, instance, ownerInstance)
  97 +}
  98 +
  99 +/**
  100 + * 移动方向判断
  101 + * @param {Object} left
  102 + * @param {Object} value
  103 + * @param {Object} ownerInstance
  104 + * @param {Object} ins
  105 + */
  106 +function moveDirection(left, value, ins, ownerInstance) {
  107 + var state = ins.getState()
  108 + var position = state.position
  109 + var isopen = state.isopen
  110 + if (!position[1].width) {
  111 + openState(false, ins, ownerInstance)
  112 + return
  113 + }
  114 + // 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
  115 + if (isopen) {
  116 + if (-left <= position[1].width) {
  117 + openState(false, ins, ownerInstance)
  118 + } else {
  119 + openState(true, ins, ownerInstance)
  120 + }
  121 + return
  122 + }
  123 + // 如果是关闭状态,进行判断是否打开,还是保留关闭状态
  124 + if (left <= value) {
  125 + openState(true, ins, ownerInstance)
  126 + } else {
  127 + openState(false, ins, ownerInstance)
  128 + }
  129 +}
  130 +
  131 +/**
  132 + * 设置按钮移动距离
  133 + * @param {Object} value
  134 + * @param {Object} instance
  135 + * @param {Object} ownerInstance
  136 + */
  137 +function buttonFold(value, instance, ownerInstance) {
  138 + var ins = ownerInstance.selectAllComponents('.button-hock');
  139 + var state = instance.getState();
  140 + var position = state.position;
  141 + var arr = [];
  142 + var w = 0;
  143 + for (var i = 0; i < ins.length; i++) {
  144 + if (!ins[i].getDataset().button) return
  145 + var btnData = JSON.parse(ins[i].getDataset().button)
  146 +
  147 + // fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
  148 + if (typeof(btnData) === 'string') {
  149 + btnData = JSON.parse(btnData)
  150 + }
  151 +
  152 + var button = btnData[i] && btnData[i].width || 0
  153 + w += button
  154 + arr.push(-w)
  155 + // 动态计算按钮组每个按钮的折叠动画移动距离
  156 + var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
  157 + if (i != 0) {
  158 + ins[i].setStyle({
  159 + transform: 'translateX(' + distance + 'px)',
  160 + })
  161 + }
  162 + }
  163 +}
  164 +
  165 +/**
  166 + * 开启状态
  167 + * @param {Boolean} type
  168 + * @param {Object} ins
  169 + * @param {Object} ownerInstance
  170 + */
  171 +function openState(type, ins, ownerInstance) {
  172 + var state = ins.getState()
  173 + var position = state.position
  174 + if (state.isopen === undefined) {
  175 + state.isopen = false
  176 + }
  177 + // 只有状态有改变才会通知页面改变状态
  178 + if (state.isopen !== type) {
  179 + // 通知页面,已经打开
  180 + ownerInstance.callMethod('change', {
  181 + open: type
  182 + })
  183 + }
  184 + // 设置打开和移动状态
  185 + state.isopen = type
  186 +
  187 +
  188 + // 添加动画类
  189 + ins.addClass('ani');
  190 + var owner = ownerInstance.selectAllComponents('.button-hock')
  191 + for (var i = 0; i < owner.length; i++) {
  192 + owner[i].addClass('ani');
  193 + }
  194 + // 设置最终移动位置
  195 + move(type ? -position[1].width : 0, ins, ownerInstance)
  196 +
  197 +}
  198 +
  199 +module.exports = {
  200 + sizeReady: sizeReady,
  201 + touchstart: touchstart,
  202 + touchmove: touchmove,
  203 + touchend: touchend
  204 +}
... ...
src/components/uni-swipe-action-item/mpalipay.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,160 @@
  1 +export default {
  2 + data() {
  3 + return {
  4 + isshow: false,
  5 + viewWidth: 0,
  6 + buttonWidth: 0,
  7 + disabledView: false,
  8 + x: 0,
  9 + transition: false
  10 + }
  11 + },
  12 + watch: {
  13 + show(newVal) {
  14 + if (this.autoClose) return
  15 + if (newVal) {
  16 + this.open()
  17 + } else {
  18 + this.close()
  19 + }
  20 + },
  21 + },
  22 + created() {
  23 + if (this.swipeaction.children !== undefined) {
  24 + this.swipeaction.children.push(this)
  25 + }
  26 + },
  27 + beforeDestroy() {
  28 + this.swipeaction.children.forEach((item, index) => {
  29 + if (item === this) {
  30 + this.swipeaction.children.splice(index, 1)
  31 + }
  32 + })
  33 + },
  34 + mounted() {
  35 + this.isopen = false
  36 + this.transition = true
  37 + setTimeout(() => {
  38 + this.getQuerySelect()
  39 + }, 50)
  40 +
  41 + },
  42 + methods: {
  43 + onClick(index, item) {
  44 + this.$emit('click', {
  45 + content: item,
  46 + index
  47 + })
  48 + },
  49 + touchstart(e) {
  50 + let {
  51 + pageX,
  52 + pageY
  53 + } = e.changedTouches[0]
  54 + this.transition = false
  55 + this.startX = pageX
  56 + if (this.autoClose) {
  57 + this.swipeaction.closeOther(this)
  58 + }
  59 + },
  60 + touchmove(e) {
  61 + let {
  62 + pageX,
  63 + } = e.changedTouches[0]
  64 + this.slide = this.getSlide(pageX)
  65 + if (this.slide === 0) {
  66 + this.disabledView = false
  67 + }
  68 +
  69 + },
  70 + touchend(e) {
  71 + this.stop = false
  72 + this.transition = true
  73 + if (this.isopen) {
  74 + if (this.moveX === -this.buttonWidth) {
  75 + this.close()
  76 + return
  77 + }
  78 + this.move()
  79 + } else {
  80 + if (this.moveX === 0) {
  81 + this.close()
  82 + return
  83 + }
  84 + this.move()
  85 + }
  86 + },
  87 + open() {
  88 + this.x = this.moveX
  89 + this.$nextTick(() => {
  90 + this.x = -this.buttonWidth
  91 + this.moveX = this.x
  92 +
  93 + if(!this.isopen){
  94 + this.isopen = true
  95 + this.$emit('change', true)
  96 + }
  97 + })
  98 + },
  99 + close() {
  100 + this.x = this.moveX
  101 + this.$nextTick(() => {
  102 + this.x = 0
  103 + this.moveX = this.x
  104 + if(this.isopen){
  105 + this.isopen = false
  106 + this.$emit('change', false)
  107 + }
  108 + })
  109 + },
  110 + move() {
  111 + if (this.slide === 0) {
  112 + this.open()
  113 + } else {
  114 + this.close()
  115 + }
  116 + },
  117 + onChange(e) {
  118 + let x = e.detail.x
  119 + this.moveX = x
  120 + if (x >= this.buttonWidth) {
  121 + this.disabledView = true
  122 + this.$nextTick(() => {
  123 + this.x = this.buttonWidth
  124 + })
  125 + }
  126 + },
  127 + getSlide(x) {
  128 + if (x >= this.startX) {
  129 + this.startX = x
  130 + return 1
  131 + } else {
  132 + this.startX = x
  133 + return 0
  134 + }
  135 +
  136 + },
  137 + getQuerySelect() {
  138 + const query = uni.createSelectorQuery().in(this);
  139 + query.selectAll('.viewWidth-hook').boundingClientRect(data => {
  140 +
  141 + this.viewWidth = data[0].width
  142 + this.buttonWidth = data[1].width
  143 + this.transition = false
  144 + this.$nextTick(() => {
  145 + this.transition = true
  146 + })
  147 +
  148 + if (!this.buttonWidth) {
  149 + this.disabledView = true
  150 + }
  151 +
  152 + if (this.autoClose) return
  153 + if (this.show) {
  154 + this.open()
  155 + }
  156 + }).exec();
  157 +
  158 + }
  159 + }
  160 +}
... ...
src/components/uni-swipe-action-item/mpother.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,158 @@
  1 +// #ifdef APP-NVUE
  2 +const dom = weex.requireModule('dom');
  3 +// #endif
  4 +export default {
  5 + data() {
  6 + return {
  7 + uniShow: false,
  8 + left: 0
  9 + }
  10 + },
  11 + computed: {
  12 + moveLeft() {
  13 + return `translateX(${this.left}px)`
  14 + }
  15 + },
  16 + watch: {
  17 + show(newVal) {
  18 + if (!this.position || JSON.stringify(this.position) === '{}') return;
  19 + if (this.autoClose) return
  20 + if (newVal) {
  21 + this.$emit('change', true)
  22 + this.open()
  23 + } else {
  24 + this.$emit('change', false)
  25 + this.close()
  26 + }
  27 + }
  28 + },
  29 + mounted() {
  30 + this.position = {}
  31 + if (this.swipeaction.children !== undefined) {
  32 + this.swipeaction.children.push(this)
  33 + }
  34 + setTimeout(() => {
  35 + this.getSelectorQuery()
  36 + }, 100)
  37 + },
  38 + beforeDestoy() {
  39 + this.swipeaction.children.forEach((item, index) => {
  40 + if (item === this) {
  41 + this.swipeaction.children.splice(index, 1)
  42 + }
  43 + })
  44 + },
  45 + methods: {
  46 + onClick(index, item) {
  47 + this.$emit('click', {
  48 + content: item,
  49 + index
  50 + })
  51 + this.close()
  52 + },
  53 + touchstart(e) {
  54 + const {
  55 + pageX
  56 + } = e.touches[0]
  57 + if (this.disabled) return
  58 + const left = this.position.content.left
  59 + if (this.autoClose) {
  60 + this.swipeaction.closeOther(this)
  61 + }
  62 + this.width = pageX - left
  63 + if (this.isopen) return
  64 + if (this.uniShow) {
  65 + this.uniShow = false
  66 + this.isopen = true
  67 + this.openleft = this.left + this.position.button.width
  68 + }
  69 + },
  70 + touchmove(e, index) {
  71 + if (this.disabled) return
  72 + const {
  73 + pageX
  74 + } = e.touches[0]
  75 + this.setPosition(pageX)
  76 + },
  77 + touchend() {
  78 + if (this.disabled) return
  79 + if (this.isopen) {
  80 + this.move(this.openleft, 0)
  81 + return
  82 + }
  83 + this.move(this.left, -40)
  84 + },
  85 + setPosition(x, y) {
  86 + if (!this.position.button.width) {
  87 + return
  88 + }
  89 + // this.left = x - this.width
  90 + this.setValue(x - this.width)
  91 + },
  92 + setValue(value) {
  93 + // 设置最大最小值
  94 + this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
  95 + this.position.content.left = this.left
  96 + if (this.isopen) {
  97 + this.openleft = this.left + this.position.button.width
  98 + }
  99 + },
  100 + move(left, value) {
  101 + if (left >= value) {
  102 + this.$emit('change', false)
  103 + this.close()
  104 + } else {
  105 + this.$emit('change', true)
  106 + this.open()
  107 + }
  108 + },
  109 + open() {
  110 + this.uniShow = true
  111 + this.left = -this.position.button.width
  112 + this.setValue(-this.position.button.width)
  113 + },
  114 + close() {
  115 + this.uniShow = true
  116 + this.setValue(0)
  117 + setTimeout(() => {
  118 + this.uniShow = false
  119 + this.isopen = false
  120 + }, 300)
  121 + },
  122 + getSelectorQuery() {
  123 + // #ifndef APP-NVUE
  124 + const views = uni.createSelectorQuery()
  125 + .in(this)
  126 + views
  127 + .selectAll('.selector-query-hock')
  128 + .boundingClientRect(data => {
  129 + this.position.content = data[1]
  130 + this.position.button = data[0]
  131 + if (this.autoClose) return
  132 + if (this.show) {
  133 + this.open()
  134 + } else {
  135 + this.close()
  136 + }
  137 + })
  138 + .exec()
  139 + // #endif
  140 + // #ifdef APP-NVUE
  141 + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  142 + if (this.position.content) return
  143 + this.position.content = data.size
  144 + })
  145 + dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
  146 + if (this.position.button) return
  147 + this.position.button = data.size
  148 + if (this.autoClose) return
  149 + if (this.show) {
  150 + this.open()
  151 + } else {
  152 + this.close()
  153 + }
  154 + })
  155 + // #endif
  156 + }
  157 + }
  158 +}
... ...
src/components/uni-swipe-action-item/mpwxs.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,97 @@
  1 +export default {
  2 + data() {
  3 + return {
  4 + position: [],
  5 + button: []
  6 + }
  7 + },
  8 + computed: {
  9 + pos() {
  10 + return JSON.stringify(this.position)
  11 + },
  12 + btn() {
  13 + return JSON.stringify(this.button)
  14 + }
  15 + },
  16 + watch: {
  17 + show(newVal) {
  18 + if (this.autoClose) return
  19 + let valueObj = this.position[0]
  20 + if (!valueObj) {
  21 + this.init()
  22 + return
  23 + }
  24 + valueObj.show = newVal
  25 + this.$set(this.position, 0, valueObj)
  26 + }
  27 + },
  28 + created() {
  29 + if (this.swipeaction.children !== undefined) {
  30 + this.swipeaction.children.push(this)
  31 + }
  32 + },
  33 + mounted() {
  34 + this.init()
  35 +
  36 + },
  37 + beforeDestroy() {
  38 + this.swipeaction.children.forEach((item, index) => {
  39 + if (item === this) {
  40 + this.swipeaction.children.splice(index, 1)
  41 + }
  42 + })
  43 + },
  44 + methods: {
  45 + init() {
  46 +
  47 + setTimeout(() => {
  48 + this.getSize()
  49 + this.getButtonSize()
  50 + }, 50)
  51 + },
  52 + closeSwipe(e) {
  53 + if (!this.autoClose) return
  54 + this.swipeaction.closeOther(this)
  55 + },
  56 +
  57 + change(e) {
  58 + this.$emit('change', e.open)
  59 + let valueObj = this.position[0]
  60 + if (valueObj.show !== e.open) {
  61 + valueObj.show = e.open
  62 + this.$set(this.position, 0, valueObj)
  63 + }
  64 + },
  65 + onClick(index, item) {
  66 + this.$emit('click', {
  67 + content: item,
  68 + index
  69 + })
  70 + },
  71 + appTouchStart(){},
  72 + appTouchEnd(){},
  73 + getSize() {
  74 + const views = uni.createSelectorQuery().in(this)
  75 + views
  76 + .selectAll('.selector-query-hock')
  77 + .boundingClientRect(data => {
  78 + if (this.autoClose) {
  79 + data[0].show = false
  80 + } else {
  81 + data[0].show = this.show
  82 + }
  83 + this.position = data
  84 + })
  85 + .exec()
  86 + },
  87 + getButtonSize() {
  88 + const views = uni.createSelectorQuery().in(this)
  89 + views
  90 + .selectAll('.button-hock')
  91 + .boundingClientRect(data => {
  92 + this.button = data
  93 + })
  94 + .exec()
  95 + }
  96 + }
  97 +}
... ...
src/components/uni-swipe-action-item/uni-swipe-action-item.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,270 @@
  1 +<template>
  2 + <view class="uni-swipe">
  3 + <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
  4 + <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
  5 + <view class="uni-swipe_content">
  6 + <view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
  7 + @touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
  8 + <view class="uni-swipe_box">
  9 + <slot />
  10 + </view>
  11 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
  12 + <!-- 使用 touchend 解决 ios 13 不触发按钮事件的问题-->
  13 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  14 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  15 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  16 + }"
  17 + class="uni-swipe_button button-hock" @touchend="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  18 + </view>
  19 + </view>
  20 + </view>
  21 + <!-- #endif -->
  22 +
  23 + <!-- app nvue端 使用 bindingx -->
  24 + <!-- #ifdef APP-NVUE -->
  25 + <view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
  26 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
  27 + <view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
  28 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
  29 + class="uni-swipe_button " @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text></view>
  30 + </view>
  31 + <view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
  32 + <view class="uni-swipe_box">
  33 + <slot />
  34 + </view>
  35 + </view>
  36 + </view>
  37 + <!-- #endif -->
  38 +
  39 + <!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
  40 + <!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || H5 -->
  41 + <view class="uni-swipe_content">
  42 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
  43 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  44 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  45 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  46 + }"
  47 + class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  48 + </view>
  49 + <view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
  50 + @touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
  51 + <view class="uni-swipe_move-box" >
  52 + <view class="uni-swipe_box">
  53 + <slot />
  54 + </view>
  55 + </view>
  56 + </view>
  57 + </view>
  58 + <!-- #endif -->
  59 + <!-- #ifdef MP-ALIPAY -->
  60 + <view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
  61 + <view class="viewWidth-hook">
  62 + <movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
  63 + <movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
  64 + :class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
  65 + <view class="movable-view-box">
  66 + <slot></slot>
  67 + </view>
  68 + </movable-view>
  69 + </movable-area>
  70 + </view>
  71 + <view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
  72 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  73 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  74 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  75 + }"
  76 + class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  77 + </view>
  78 + </view>
  79 + <!-- #endif -->
  80 + </view>
  81 +</template>
  82 +<script src="./index.wxs" module="swipe" lang="wxs"></script>
  83 +<script>
  84 + // #ifdef APP-VUE|| MP-WEIXIN || H5
  85 + import mpwxs from './mpwxs'
  86 + // #endif
  87 +
  88 + // #ifdef APP-NVUE
  89 + import bindingx from './bindingx.js'
  90 + // #endif
  91 +
  92 + // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
  93 + import mixins from './mpother'
  94 + // #endif
  95 +
  96 + // #ifdef MP-ALIPAY
  97 + import mpalipay from './mpalipay'
  98 + // #endif
  99 +
  100 + /**
  101 + * SwipeActionItem 滑动操作子组件
  102 + * @description 通过滑动触发选项的容器
  103 + * @tutorial https://ext.dcloud.net.cn/plugin?id=181
  104 + * @property {Boolean} show = [true|false] 开启关闭组件，auto-close = false 时生效
  105 + * @property {Boolean} disabled = [true|false] 是否禁止滑动
  106 + * @property {Boolean} autoClose = [true|false] 其他组件开启的时候，当前组件是否自动关闭
  107 + * @property {Array} options 组件选项内容及样式
  108 + * @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
  109 + * @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
  110 + */
  111 +
  112 + export default {
  113 + // #ifdef APP-VUE|| MP-WEIXIN||H5
  114 + mixins: [mpwxs],
  115 + // #endif
  116 +
  117 + // #ifdef APP-NVUE
  118 + mixins: [bindingx],
  119 + // #endif
  120 +
  121 + // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
  122 + mixins: [mixins],
  123 + // #endif
  124 +
  125 + // #ifdef MP-ALIPAY
  126 + mixins: [mpalipay],
  127 + // #endif
  128 +
  129 + props: {
  130 + /**
  131 + * 按钮内容
  132 + */
  133 + options: {
  134 + type: Array,
  135 + default () {
  136 + return []
  137 + }
  138 + },
  139 + /**
  140 + * 禁用
  141 + */
  142 + disabled: {
  143 + type: Boolean,
  144 + default: false
  145 + },
  146 + /**
  147 + * 变量控制开关
  148 + */
  149 + show: {
  150 + type: Boolean,
  151 + default: false
  152 + },
  153 + /**
  154 + * 是否自动关闭
  155 + */
  156 + autoClose: {
  157 + type: Boolean,
  158 + default: true
  159 + }
  160 + },
  161 + inject: ['swipeaction']
  162 +
  163 +
  164 + }
  165 +</script>
  166 +<style lang="scss" scoped>
  167 + .uni-swipe {
  168 + overflow: hidden;
  169 + }
  170 +
  171 + .uni-swipe-box {
  172 + position: relative;
  173 + width: 100%;
  174 + }
  175 +
  176 + .uni-swipe_content {
  177 + flex: 1;
  178 + position: relative;
  179 + }
  180 +
  181 + .uni-swipe_move-box {
  182 + /* #ifndef APP-NVUE */
  183 + display: flex;
  184 + /* #endif */
  185 + position: relative;
  186 + flex-direction: row;
  187 + }
  188 +
  189 + .uni-swipe_box {
  190 + /* #ifndef APP-NVUE */
  191 + display: flex;
  192 + flex-direction: row;
  193 + width: 100%;
  194 + flex-shrink: 0;
  195 + /* #endif */
  196 + /* #ifdef APP-NVUE */
  197 + flex: 1;
  198 + /* #endif */
  199 + font-size: 14px;
  200 + background-color: #fff;
  201 + }
  202 +
  203 + .uni-swipe_button-group {
  204 + /* #ifndef APP-VUE|| MP-WEIXIN||H5 */
  205 + position: absolute;
  206 + top: 0;
  207 + right: 0;
  208 + bottom: 0;
  209 + z-index: 0;
  210 + /* #endif */
  211 + /* #ifndef APP-NVUE */
  212 + display: flex;
  213 + flex-shrink: 0;
  214 + /* #endif */
  215 + flex-direction: row;
  216 + }
  217 +
  218 + .uni-swipe_button {
  219 + /* #ifdef APP-NVUE */
  220 + position: absolute;
  221 + left: 0;
  222 + top: 0;
  223 + bottom: 0;
  224 + /* #endif */
  225 + /* #ifndef APP-NVUE */
  226 + display: flex;
  227 + /* #endif */
  228 + flex-direction: row;
  229 + justify-content: center;
  230 + align-items: center;
  231 + padding: 0 20px;
  232 + }
  233 +
  234 + .uni-swipe_button-text {
  235 + /* #ifndef APP-NVUE */
  236 + flex-shrink: 0;
  237 + /* #endif */
  238 + font-size: 14px;
  239 + }
  240 +
  241 + .ani {
  242 + transition-property: transform;
  243 + transition-duration: 0.3s;
  244 + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  245 + }
  246 +
  247 + /* #ifdef MP-ALIPAY */
  248 + .movable-area {
  249 + width: 300px;
  250 + height: 100%;
  251 + height: 45px;
  252 + }
  253 +
  254 + .movable-view {
  255 + position: relative;
  256 + width: 160%;
  257 + height: 45px;
  258 + z-index: 2;
  259 + }
  260 + .transition {
  261 + transition: all 0.3s;
  262 + }
  263 +
  264 + .movable-view-box {
  265 + width: 100%;
  266 + height: 100%;
  267 + background-color: #fff;
  268 + }
  269 + /* #endif */
  270 +</style>
... ...
src/components/uni-swipe-action/uni-swipe-action.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,58 @@
  1 +<template>
  2 + <view>
  3 + <slot></slot>
  4 + </view>
  5 +</template>
  6 +
  7 +<script>
  8 + /**
  9 + * SwipeAction 滑动操作
  10 + * @description 通过滑动触发选项的容器
  11 + * @tutorial https://ext.dcloud.net.cn/plugin?id=181
  12 + */
  13 + export default {
  14 + data() {
  15 + return {};
  16 + },
  17 + provide() {
  18 + return {
  19 + swipeaction: this
  20 + }
  21 + },
  22 + created() {
  23 + this.children = []
  24 + },
  25 + methods: {
  26 + closeOther(vm) {
  27 + let children = this.children
  28 + children.forEach((item, index) => {
  29 + if (vm === item) return
  30 + // 支付宝执行以下操作
  31 + // #ifdef MP-ALIPAY
  32 + if (item.isopen) {
  33 + item.close()
  34 + }
  35 + // #endif
  36 +
  37 + // app vue 端、h5 、微信、支付宝 执行以下操作
  38 + // #ifdef APP-VUE || H5 || MP-WEIXIN
  39 + let position = item.position[0]
  40 + let show = position.show
  41 + if (show) {
  42 + position.show = false
  43 + }
  44 + // #endif
  45 +
  46 + // nvue 执行以下操作
  47 + // #ifdef APP-NVUE || MP-BAIDU || MP-QQ || MP-TOUTIAO
  48 + item.close()
  49 + // #endif
  50 + })
  51 + }
  52 + }
  53 + }
  54 +</script>
  55 +
  56 +<style>
  57 +
  58 +</style>
... ...
src/components/uni-transition/uni-transition.vue
Diff comments   View file @7614465
... ... @@ -10,7 +10,7 @@
10 10 const animation = uni.requireNativePlugin('animation');
11 11 // #endif
12 12 /**
13   - * Transition 过渡动画
  13 + * Transition 过渡动画
14 14 * @description 简单过渡动画组件
15 15 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
16 16 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
... ...
... ... @@ -18,20 +18,26 @@
18 18 "navigationBarTitleText": "验光数据"
19 19 }
20 20 },
  21 + // {
  22 + // "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
  23 + // "style": {
  24 + // "navigationBarTitleText": "镜片名称名称"
  25 + // }
  26 + // },
  27 + // {
  28 + // "path": "pages/purchaseLenses/purchaseLenses",
  29 + // "style": {
  30 + // "navigationBarTitleText": "参数选择"
  31 + // }
  32 + // },
  33 + // {
  34 + // "path": "pages/lensDetails/lensDetails",
  35 + // "style": {
  36 + // "navigationBarTitleText": "产品详情"
  37 + // }
  38 + // },
21 39 {
22   - "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23   - "style": {
24   - "navigationBarTitleText": "镜片名称名称"
25   - }
26   - },
27   - {
28   - "path": "pages/purchaseLenses/purchaseLenses",
29   - "style": {
30   - "navigationBarTitleText": "参数选择"
31   - }
32   - },
33   - {
34   - "path": "pages/lensDetails/lensDetails",
  40 + "path": "pages/details/details",
35 41 "style": {
36 42 "navigationBarTitleText": "产品详情"
37 43 }
... ... @@ -51,21 +57,25 @@
51 57 {
52 58 "path": "pages/cart/cart",
53 59 "style": {
54   - "navigationBarTitleText": "购物车"
55   - }
56   - },
57   - {
58   - "path": "pages/frameDetail/frameDetail",
59   - "style": {
60   - "navigationBarTitleText": "产品详情"
61   - }
62   - },
63   - {
64   - "path": "pages/refundProgress/refundProgress",
65   - "style": {
66   - "navigationBarTitleText": "申请退款"
  60 + "navigationBarTitleText": "购物车",
  61 + // "disableScroll":true,
  62 + "app-plus": {
  63 + "bounce": "none"
  64 + }
67 65 }
68 66 },
  67 + // {
  68 + // "path": "pages/frameDetail/frameDetail",
  69 + // "style": {
  70 + // "navigationBarTitleText": "产品详情"
  71 + // }
  72 + // },
  73 + // {
  74 + // "path": "pages/refundProgress/refundProgress",
  75 + // "style": {
  76 + // "navigationBarTitleText": "申请退款"
  77 + // }
  78 + // },
69 79 {
70 80 "path": "pages/address/addAddress",
71 81 "style": {
... ... @@ -84,48 +94,95 @@
84 94 "navigationBarTitleText": "确认订单"
85 95 }
86 96 },
87   - {
88   - "path": "pages/refundment/refundWays",
89   - "style": {
90   - "navigationBarTitleText": "退款方式"
91   - }
92   - },
93   - {
94   - "path": "pages/refundment/refundment",
95   - "style": {
96   - "navigationBarTitleText": "申请退款"
97   - }
98   - },
  97 + // {
  98 + // "path": "pages/refundment/refundWays",
  99 + // "style": {
  100 + // "navigationBarTitleText": "退款方式"
  101 + // }
  102 + // },
  103 + // {
  104 + // "path": "pages/refundment/refundment",
  105 + // "style": {
  106 + // "navigationBarTitleText": "申请退款"
  107 + // }
  108 + // },
99 109 {
100 110 "path": "pages/predelivery/predelivery",
101 111 "style": {
102 112 "navigationBarTitleText": "待发货"
103 113 }
104 114 },
  115 + // {
  116 + // "path": "pages/customerService/customerService",
  117 + // "style": {
  118 + // "navigationBarTitleText": "在线客服"
  119 + // }
  120 + // },
  121 + // {
  122 + // "path": "pages/detailStandard/detailStandard_sun",
  123 + // "style": {
  124 + // "navigationBarTitleText": "太阳镜选购页"
  125 + // }
  126 + // },
  127 + // {
  128 + // "path": "pages/detailStandard/detailStandard_k",
  129 + // "style": {
  130 + // "navigationBarTitleText": "镜框选购页"
  131 + // }
  132 + // },
105 133 {
106   - "path": "pages/customerService/customerService",
107   - "style": {
108   - "navigationBarTitleText": "在线客服"
109   - }
110   - },
111   - {
112   - "path": "pages/detailStandard/detailStandard_sun",
  134 + "path": "pages/newOpticsData/newOpticsData",
113 135 "style": {
114   - "navigationBarTitleText": "太阳镜选购页"
  136 + "navigationBarTitleText": "验光数据"
115 137 }
116   - },
  138 + }
  139 + ],
  140 + "subpackages": [
117 141 {
118   - "path": "pages/detailStandard/detailStandard_k",
119   - "style": {
120   - "navigationBarTitleText": "镜框选购页"
121   - }
  142 + "root": "refundment",
  143 + "pages": [
  144 + {
  145 + "path": "refundWays",
  146 + "style": {}
  147 + },
  148 + {
  149 + "path": "refundment",
  150 + "style": {}
  151 + },
  152 + {
  153 + "path": "/pages/refundProgress/refundProgress",
  154 + "style": {}
  155 + }
  156 + ]
122 157 },
123 158 {
124   - "path": "pages/newOpticsData/newOpticsData",
125   - "style": {
126   - "navigationBarTitleText": "验光数据"
127   - }
  159 + "root": "address",
  160 + "name": "pack2",
  161 + "pages": [
  162 + {
  163 + "path": "addAddress",
  164 + "style": {}
  165 + },
  166 + {
  167 + "path": "addressList",
  168 + "style": {}
  169 + }
  170 + ]
128 171 }
  172 + // {
  173 + // "root": "pages/myOrder",
  174 + // "name": "pack3",
  175 + // "pages": [
  176 + // {
  177 + // "path": "pages/myOrder/myOrder",
  178 + // "style": {}
  179 + // },
  180 + // {
  181 + // "path": "pages/myOrderPaying/myOrderPaying",
  182 + // "style": {}
  183 + // }
  184 + // ]
  185 + // }
129 186 ],
130 187 "globalStyle": {
131 188 "navigationBarTextStyle": "black",
... ... @@ -162,6 +219,11 @@
162 219 "condition": {
163 220 "current": 0,
164 221 "list": [
  222 + // {
  223 + // "name": "首页",
  224 + // "path": "pages/test/index",
  225 + // "query": ""
  226 + // },
165 227 {
166 228 "name": "首页",
167 229 "path": "pages/index/index",
... ... @@ -169,6 +231,11 @@
169 231 },
170 232 {
171 233 "name": "产品详情",
  234 + "path": "pages/details/details",
  235 + "query": ""
  236 + },
  237 + {
  238 + "name": "旧版产品详情",
172 239 "path": "pages/frameDetail/frameDetail",
173 240 "query": ""
174 241 },
... ... @@ -206,7 +273,19 @@
206 273 "name": "我的",
207 274 "path": "pages/user/user",
208 275 "query": ""
209   - }
  276 + },
  277 +
  278 + {
  279 + "name": "验光数据",
  280 + "path": "pages/addOpticsData/addOpticsData",
  281 + "query": ""
  282 + },
  283 +
  284 + {
  285 + "name": "新建验光数据",
  286 + "path": "pages/newOpticsData/newOpticsData",
  287 + "query": ""
  288 + }
210 289 ]
211 290 }
212 291 }
213 292 \ No newline at end of file
... ...
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @7614465
... ... @@ -41,6 +41,15 @@
41 41 <view class="dataInfoItem">
42 42 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
43 43 </view>
  44 + <view class="dataInfoItem">
  45 + <text>镜片宽度：</text><text>{{loveItem.glassWidth!=''?loveItem.glassWidth:'暂无数据'}}</text>
  46 + </view>
  47 + <view class="dataInfoItem">
  48 + <text>鼻梁宽度：</text><text>{{loveItem.norseWidth!=''?loveItem.norseWidth:'暂无数据'}}</text>
  49 + </view>
  50 + <view class="dataInfoItem">
  51 + <text>镜腿长度：</text><text>{{loveItem.legWidth!=''?loveItem.legWidth:'暂无数据'}}</text>
  52 + </view>
44 53 </view>
45 54 </uni-collapse-item>
46 55 </view>
... ... @@ -64,15 +73,21 @@
64 73 whichTap:0
65 74 };
66 75 },
67   - onLoad: function(option) {
  76 + onShow() {
68 77 //获取关心的人列表
69 78 store.dispatch('myLoveList/getLoveList', {
70 79 uid: this.$store.state.user.userInfo.uid,
71 80 });
72 81 },
  82 + onLoad: function(option) {
  83 + // //获取关心的人列表
  84 + // store.dispatch('myLoveList/getLoveList', {
  85 + // uid: this.$store.state.user.userInfo.uid,
  86 + // });
  87 + },
73 88 computed:{
74 89 loveList() {
75   - console.log(this.$store.state.myLoveList.loveList)
  90 + // console.log(this.$store.state.myLoveList.loveList)
76 91 return this.$store.state.myLoveList.loveList || []
77 92 },
78 93 },
... ... @@ -81,7 +96,7 @@
81 96 this.whichTap = item
82 97 this.$refs.popup.open()
83 98 },
84   - //给时间搞一个nice的格式
  99 + //给时间搞一个的格式
85 100 getRightTime(time){
86 101 //如果小于10 则返回'0'+m
87 102 // function add(m){return m<10?'0'+m:m}
... ...
src/pages/address/addAddress.vue
Diff comments   View file @7614465
... ... @@ -116,15 +116,17 @@ export default {
116 116 uni.setNavigationBarTitle({
117 117 title: '编辑地址'
118 118 })
119   - const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details
  119 + const { name, mobile, sex, add_detail: addDetial, default: isDefault,address } = this.$store.state.address.details
120 120 console.log('---', this.$store.state.address.details)
121 121 const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label')
  122 + console.log(index)
122 123 this.cityPickerValueDefault = index.index
123 124 this.name = name
124 125 this.mobile = Number(mobile)
125 126 this.sexIndex = sex
126 127 this.addDetial = addDetial
127 128 this.isDefalutAddress = !!Number(isDefault)
  129 + this.pickerText = address
128 130 })
129 131 }
130 132 },
... ... @@ -200,6 +202,7 @@ export default {
200 202 params.add_id = this.addId
201 203 }
202 204 store.dispatch('address/edit', params).then(() => {
  205 + console.log('fanhui')
203 206 uni.navigateBack({
204 207 delta: 1
205 208 })
... ...
src/pages/address/addressList.vue
Diff comments   View file @7614465
... ... @@ -24,13 +24,13 @@
24 24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
25 25 </view>
26 26 <image
27   - @tap="toEditAddress(item.add_id)"
  27 + @click.stop="toEditAddress(item.add_id)"
28 28 v-if="item.default === '1'"
29 29 class="arrow"
30 30 src="../../static/right.png"
31 31 ></image>
32 32 <image
33   - @tap="toEditAddress(item.add_id)"
  33 + @click.stop="toEditAddress(item.add_id)"
34 34 v-else
35 35 class="arrow pen"
36 36 src="../../static/icon-pen.png"
... ... @@ -64,6 +64,9 @@ export default {
64 64 }
65 65 store.dispatch('address/list')
66 66 },
  67 + onShow() {
  68 + store.dispatch('address/list')
  69 + },
67 70 methods: {
68 71 toAddAddress() {
69 72 console.log('aaaaa-a')
... ... @@ -85,12 +88,18 @@ export default {
85 88 },
86 89 toOrder (addId) {
87 90 if (this.edit) {
88   - uni.navigateTo({
89   - url: `../confirmOrder/confirmOrder?addressId=${addId}`,
90   - fail: (error) => {
91   - console.error('跳转出现错误', error)
92   - }
93   - })
  91 + let pages = getCurrentPages();
  92 + let prevPage = pages[pages.length - 2]; //上一个页面
  93 + const addressId=addId
  94 + // console.log(addressId)
  95 + prevPage.onShow(addressId);
  96 + uni.navigateBack();
  97 + // uni.navigateTo({
  98 + // url: `../confirmOrder/confirmOrder?addressId=${addId}`,
  99 + // fail: (error) => {
  100 + // console.error('跳转出现错误', error)
  101 + // }
  102 + // })
94 103 }
95 104 }
96 105 }
... ... @@ -116,7 +125,8 @@ export default {
116 125 height: 108rpx;
117 126 width: 100%;
118 127 align-items: center;
119   - margin-left: 126rpx;
  128 + padding-left: 126rpx;
  129 + box-sizing: border-box;
120 130 .name {
121 131 display: flex;
122 132 justify-content: space-between;
... ...
src/pages/cart/cart.vue
Diff comments   View file @7614465
1   -<template>
2   - <view class="content">
3   - <block v-if="cartList.length==0">
4   -
5   - </block>
6   - <block v-else>
7   - <view class="card">
8   - <view class="cardHeader">
9   - <view
10   - v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11   - @touchstart="pChange(pIsoPen)"
12   - >
13   - <span class="correct"></span>
14   - </view>
15   - <image
16   - src="../../static/store.png"
17   - mode="aspectFill"
18   - ></image>
19   - <text>非常戴镜</text>
20   - </view>
21   - <view
22   - class="cardBody"
23   - v-for="(item,index) in cartList"
24   - :key="index"
25   - @longpress="delCart(item.cart_id,index)"
26   - >
27   - <view
28   - v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29   - @touchstart="Change(childIsOpen[index],index)"
30   - >
31   - <span class="correct"></span>
32   - </view>
33   - <view class="imageWrap">
34   - <image
35   - :src="item.img_index_url"
36   - mode="aspectFit"
37   - style="width: 188rpx;height: 168rpx;"
38   - ></image>
39   - </view>
40   - <view class="goodInfo">
41   - <!-- <view class="imageWrap">
42   - <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43   - </view> -->
44   - <view class="infoRight">
45   - <view
46   - class="goodName"
47   - @tap="toGoods(item.pid,item.sk_id)"
48   - >{{item.p_name}}</view>
49   - <!-- <view class="describ"> -->
50   - <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;">
51   - <uni-collapse-item
52   - showAnimation='true'
53   - :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'">
54   - <text class="describ">
55   - <block
56   - v-for="tag in item.tag.prod_tag_fun"
57   - :key="tag.value"
58   - >
59   - {{tag.label+`&nbsp;&nbsp;`}}
60   - </block>
61   - </text>
62   - <!-- <text>
63   - <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
64   - {{tag.label+`&nbsp;&nbsp;`}}
65   - </block>
66   - </text> -->
67   - </uni-collapse-item>
68   - </uni-collapse>
69   - <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
70   - <!-- </view> -->
71   - <view class="priceBox">
72   - <view class="price">￥{{item.nowPrice*item.num}}</view>
73   - <text class="maxCount">(限购{{maxCount}}副)</text>
74   - <view class="counter">
75   - <view
76   - class="btn"
77   - disabled="this.addDisabled"
78   - type="default"
79   - @tap="counter(index,false,item)"
80   - >-</view>
81   - <text>{{item.num}}</text>
82   - <view
83   - class="btn"
84   - disabled="this.desDisabled"
85   - type="default"
86   - @tap="counter(index,true,item)"
87   - >+</view>
88   - </view>
89   - </view>
90   - </view>
91   - </view>
92   - </view>
93   - </view>
94   - </block>
95   - <view class="footer">
96   - <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
97   - <view class="footerRight">
98   - <navigator
99   - url="/pages/confirmOrder/confirmOrder"
100   - hover-class="navigator-hover"
101   - >
102   - <view class="paybtn">立即结算</view>
103   - </navigator>
104   - </view>
105   - </view>
106   -
107   - </view>
108   -</template>
109   -
110   -<script>
111   -import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
112   -import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
113   -import store from '@/store'
114   -
115   -export default {
116   - components: { UniCollapse, UniCollapseItem },
117   - data() {
118   - return {
119   - totalPrice: 0,
120   - pIsoPen: false,
121   - // childIsOpen:[],
122   - maxCount: 20,
123   - }
124   - },
125   - computed: {
126   -
127   - cartList() {
128   - // console.log('cart-list', this.$store.state.cart.cartList);
129   - this.totalPrice=0
130   - return this.$store.state.cart.cartList
131   - },
132   - childIsOpen() {
133   - const temp = []
134   - temp.length = this.$store.state.cart.cartList.length
135   - for (let i = 0; i < temp.length; i++) {
136   - temp[i] = false
137   - }
138   - console.log('this.childisOPne===>', temp)
139   - return temp
140   - },
141   - },
142   - onLoad: function() {
143   - // store.dispatch('cart/addCart', {
144   - // uid: this.$store.state.user.userInfo.uid,
145   - // openid: this.$store.state.user.userInfo.openid,
146   - // mp_id: 7,
147   - // sk_id: 7,
148   - // num: 1,
149   - // pid: 8,
150   - // price: 128,
151   - // checkedSKU:{},
152   - // })
153   - store.dispatch('cart/getCartList', {
154   - uid: this.$store.state.user.userInfo.uid, // 用户id
155   - })
156   - },
157   - methods: {
158   - toGoods(id, sk_id) {
159   - console.log('cart-list', this.$store.state.cart.cartList)
160   - console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
161   - uni.navigateTo({
162   - url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
163   - success: res => {},
164   - fail: () => {},
165   - complete: () => {},
166   - })
167   - },
168   - counter(index, isadd, item) {
169   - // console.log('===>>counter ===>num',num)
170   - // console.log('===>>counter ===>isadd',isadd)
171   - console.log('item=====>', item)
172   - console.log('num=====>', item.num)
173   - const nums = parseInt(item.num)
174   - if (isadd) {
175   - if (nums >= this.maxCount) {
176   - this.addDisabled = true
177   - } else {
178   - this.addDisabled = true
179   - // 修改num
180   - if (this.childIsOpen[index]) {
181   - this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
182   - }
183   - store.dispatch('cart/modiCart', {
184   - uid: this.$store.state.user.userInfo.uid,
185   - openid: this.$store.state.user.userInfo.openid,
186   - mp_id: item.mp_id,
187   - sk_id: item.sk_id,
188   - price: item.nowPrice,
189   - pid: item.pid,
190   - num: nums + 1,
191   - cart_id: item.cart_id,
192   - args: {
193   - index: index,
194   - isadd: isadd,
195   - },
196   - })
197   - this.addDisabled = false
198   - }
199   - } else {
200   - if (nums <= 1) {
201   - this.desDisabled = true
202   - } else {
203   - this.desDisabled = false
204   - // post 请求修改相关参数
205   - if (this.childIsOpen[index]) {
206   - this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
207   - }
208   - store.dispatch('cart/modiCart', {
209   - uid: this.$store.state.user.userInfo.uid,
210   - openid: this.$store.state.user.userInfo.openid,
211   - mp_id: item.mp_id,
212   - sk_id: item.sk_id,
213   - price: item.nowPrice,
214   - pid: item.pid,
215   - num: nums - 1,
216   - cart_id: item.cart_id,
217   - args: {
218   - index: index,
219   - isadd: isadd,
220   - },
221   - })
222   - this.desDisabled = true
223   - }
224   - }
225   - // store.dispatch('cart/getCartList', {
226   - // uid: this.$store.state.user.userInfo.uid // 用户id
227   - // })
228   - },
229   - Change(isopen, indexC) {
230   - // console.log('lalla===>',isopen)
231   - this.childIsOpen[indexC] = !isopen
232   - if (!isopen) {
233   - this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
234   - } else {
235   - this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
236   - }
237   - let m = true
238   - for (let i = 0; i < this.childIsOpen.length; i++) {
239   - m = m & this.childIsOpen[i]
240   - }
241   - if (m === 1) {
242   - this.pIsoPen = true
243   - } else {
244   - this.pIsoPen = false
245   - }
246   - },
247   - pChange(isopen) {
248   - this.pIsoPen = !isopen
249   - for (let i = 0; i < this.childIsOpen.length; i++) {
250   - this.childIsOpen[i] = !isopen
251   - }
252   - if (this.pIsoPen) {
253   - // 计算总价逻辑
254   - if (this.childIsOpen.length !== 0) {
255   - for (let i = 0; i < this.childIsOpen.length; i++) {
256   - if (this.childIsOpen[i]) {
257   - this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
258   - }
259   - }
260   - }
261   - } else {
262   - this.totalPrice = 0
263   - }
264   - },
265   - delCart(cart_id, index) {
266   - // console.log('userInfo',this.$store.state.user.userInfo)
267   - cart_id = parseInt(cart_id)
268   - // console.log('delcart------>cart_id',cart_id)
269   - // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
270   - // console.log('delcart======>index',index)
271   - uni.showModal({
272   - title: '是否删除该商品',
273   - // content: '是否删除该商品',
274   - success: function (res) {
275   - if (res.confirm) {
276   - if (this.childIsOpen[index]) {
277   - this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
278   - }
279   - console.log('index===>',index)
280   - store.dispatch('cart/delCart', {
281   - uid: this.$store.state.user.userInfo.uid,
282   - openid: this.$store.state.user.userInfo.openid,
283   - cart_id: cart_id, // 要修改的购物车id
284   - arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
285   - })
286   - }
287   - }.bind(this),
288   - })
289   - },
290   - },
291   -}
292   -</script>
293   -
294   -<style lang="scss">
295   -.content {
296   - min-height: 100vh;
297   - background-color: #f2f2f2;
298   - display: flex;
299   - flex-direction: column;
300   - align-items: center;
301   - justify-content: space-between;
302   - padding: 20rpx 40rpx;
303   - box-sizing: border-box;
304   -
305   - .partentCheck {
306   - width: 16px;
307   - height: 16px;
308   - border-radius: 22px;
309   - border: 1px solid #cfcfcf;
310   - background-color: #ffffff;
311   - margin: 24rpx 12rpx 24rpx 24rpx;
312   - }
313   - .partentChecked {
314   - width: 18px;
315   - height: 18px;
316   - border-radius: 22px;
317   - background-color: #ff6b4a;
318   - margin: 24rpx 12rpx 24rpx 24rpx;
319   - .correct {
320   - display: inline-block;
321   - position: relative;
322   - width: 10rpx;
323   - height: 2rpx;
324   - background: #ffffff;
325   - line-height: 0;
326   - font-size: 0;
327   - position: relative;
328   - top: -7px;
329   - left: 4px;
330   - -webkit-transform: rotate(45deg);
331   - }
332   - .correct:after {
333   - content: "/";
334   - display: block;
335   - width: 16rpx;
336   - height: 2rpx;
337   - background: #ffffff;
338   - -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
339   - }
340   - }
341   -
342   - .card {
343   - background-color: #ffffff;
344   - border-radius: 16rpx;
345   - box-sizing: border-box;
346   - padding: 36rpx 36rpx 36rpx 18rpx;
347   - display: flex;
348   - flex-direction: column;
349   - align-items: center;
350   - justify-content: space-between;
351   - margin-bottom: 180rpx;
352   - .cardHeader {
353   - width: 100%;
354   - height: 36rpx;
355   - display: flex;
356   - align-items: center;
357   - justify-content: flex-start;
358   - margin-bottom: 20rpx;
359   - image {
360   - height: 32rpx;
361   - width: 32rpx;
362   - padding-left: 6px;
363   - padding-right: 10px;
364   - }
365   - text {
366   - // font-family: PingFangSC-Regular;
367   - font-size: 14px;
368   - color: #333333;
369   - letter-spacing: -0.26px;
370   - }
371   - }
372   - .cardBody {
373   - width: 100%;
374   - min-height: 300rpx;
375   - display: flex;
376   - align-items: center;
377   - justify-content: space-between;
378   - .goodInfo {
379   - width: 390rpx;
380   - display: flex;
381   - flex-direction: row;
382   - justify-content: flex-start;
383   - padding-left: 6px;
384   -
385   - .imageWrap {
386   - height: 188rpx;
387   - width: 188rpx;
388   - margin-right: 28rpx;
389   -
390   - image {
391   - border-radius: 4px;
392   - height: 188rpx;
393   - width: 188rpx;
394   - }
395   - }
396   - .infoRight {
397   - display: flex;
398   - flex-direction: column;
399   - align-items: flex-start;
400   - justify-content: space-between;
401   - min-height: 240rpx;
402   - .goodName {
403   - display: -webkit-box;
404   - -webkit-box-orient: vertical;
405   - -webkit-line-clamp: 2;
406   - text-align: justify;
407   - overflow: hidden;
408   - font-size: 28rpx;
409   - color: #333333;
410   - }
411   - .describ {
412   - width: 100%;
413   - // min-height: 80rpx;
414   - // box-sizing: border-box;
415   - // padding: 10rpx;
416   - font-size: 20rpx;
417   - letter-spacing: -0.23px;
418   - text-align: justify;
419   - color: #999999;
420   - // background: #F9F9F9;
421   - // display: flex;
422   - // justify-content: center;
423   - // align-items: center;
424   - // text{
425   - // text-overflow: -o-ellipsis-lastline;
426   - // overflow: hidden;
427   - // text-overflow: ellipsis;
428   - // display: -webkit-box;
429   - // -webkit-line-clamp: 2;
430   - // line-clamp: 2;
431   - // -webkit-box-orient: vertical;
432   - // }
433   - // .icon {
434   - // width: 0;
435   - // height: 0;
436   - // border-left: 5px transparent;
437   - // border-right: 5px transparent;
438   - // border-top: 5px #979797;
439   - // border-bottom: 0 transparent;
440   - // border-style: solid;
441   - // position: relative;
442   - // margin-left: 10px;
443   - // // transform: scaleY(-1);
444   - // }
445   - // .icon::after{
446   - // content: '';
447   - // position: absolute;
448   - // top: -6.5px;
449   - // left: -5px;
450   - // border-left: 5px transparent;
451   - // border-right: 5px transparent;
452   - // border-top: 5px #FFFFFF;
453   - // border-bottom: 0 transparent;
454   - // border-style: solid;
455   - // }
456   - }
457   - .priceBox {
458   - display: flex;
459   - justify-content: space-between;
460   - align-items: center;
461   - // margin-top: 26px;
462   - width: 100%;
463   - font-size: 14px;
464   - color: #999999;
465   - .maxCount {
466   - color: #999999;
467   - font-size: 24rpx;
468   - }
469   - .price {
470   - color: #ff6b4a;
471   - font-size: 28rpx;
472   - }
473   - .counter {
474   - display: flex;
475   - flex-direction: row;
476   - justify-content: space-between;
477   - align-items: center;
478   - font-size: 28rpx;
479   - color: #333333;
480   - width: 122rpx;
481   - .btn {
482   - display: flex;
483   - justify-content: center;
484   - line-height: 32rpx;
485   - height: 32rpx;
486   - width: 32rpx;
487   - background-color: #f2f2f2;
488   - color: #cfcfcf;
489   - }
490   - }
491   - }
492   - }
493   - }
494   - }
495   - }
496   - .footer {
497   - position: fixed;
498   - left: 0;
499   - bottom: 0px;
500   - height: 112rpx;
501   - width: 100%;
502   - background-color: #ffffff;
503   - font-size: 16px;
504   - display: flex;
505   - justify-content: space-between;
506   - align-items: center;
507   - .footerLeft {
508   - display: flex;
509   - justify-content: center;
510   - align-items: center;
511   - width: 50%;
512   - color: #333333;
513   - text {
514   - color: #ff6b4a;
515   - }
516   - }
517   - .footerRight {
518   - display: flex;
519   - justify-content: flex-end;
520   - align-items: center;
521   - width: 50%;
522   - margin-right: 26rpx;
523   - .paybtn {
524   - display: flex;
525   - justify-content: center;
526   - align-items: center;
527   - background: #ff6b4a;
528   - border-radius: 20px;
529   - border-radius: 20px;
530   - color: #ffffff;
531   - width: 204rpx;
532   - height: 80rpx;
533   - }
534   - }
535   - }
536   -}
537   -</style>
  1 +<template>
  2 + <view class="content">
  3 + <block v-if="cartList.length==0">
  4 +
  5 + </block>
  6 + <block v-else>
  7 + <view class="card">
  8 + <view class="cardHeader">
  9 + <view
  10 + v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
  11 + @click="pClick"
  12 + >
  13 + <span class="correct"></span>
  14 + </view>
  15 + <image
  16 + src="../../static/store.png"
  17 + mode="aspectFill"
  18 + ></image>
  19 + <text>非常戴镜</text>
  20 + </view>
  21 + <view
  22 + class="cardBody"
  23 + v-for="(item,index) in cartList"
  24 + :key="index"
  25 + @longpress="delCart(item.cart_id,index)"
  26 + >
  27 + <view
  28 + v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
  29 + @click="childClick(cartList[index],index)"
  30 + >
  31 + <span class="correct"></span>
  32 + </view>
  33 + <view class="imageWrap">
  34 + <image
  35 + :src="item.img_index_url"
  36 + mode="aspectFit"
  37 + style="width: 188rpx;height: 168rpx;"
  38 + ></image>
  39 + </view>
  40 + <view class="goodInfo">
  41 + <!-- <view class="imageWrap">
  42 + <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
  43 + </view> -->
  44 + <view class="infoRight">
  45 + <view
  46 + class="goodName"
  47 + @tap="toGoods(item.pid,item.sk_id)"
  48 + >{{item.p_name}}</view>
  49 + <view
  50 + class="describ"
  51 + @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)"
  52 + >
  53 + <view class="desL">
  54 + <view class="people">
  55 + 使用人：{{item.peopleName}}
  56 + </view>
  57 + <view class="skuInfo">
  58 + {{item.sku_name}}
  59 + </view>
  60 + </view>
  61 + <view class="desR">
  62 + <image
  63 + src="../../static/right.png"
  64 + mode="aspectFit"
  65 + style="width: 18rpx;height: 18rpx;"
  66 + ></image>
  67 + </view>
  68 + </view>
  69 + <view class="priceBox">
  70 + <view class="price">￥{{item.nowPrice*item.num}}</view>
  71 + <text class="maxCount">(限购{{maxCount}}副)</text>
  72 + <view class="counter">
  73 + <view
  74 + class="btn"
  75 + disabled="this.addDisabled"
  76 + type="default"
  77 + @tap="counter(index,false,item)"
  78 + >-</view>
  79 + <text>{{item.num}}</text>
  80 + <view
  81 + class="btn"
  82 + disabled="this.desDisabled"
  83 + type="default"
  84 + @tap="counter(index,true,item)"
  85 + >+</view>
  86 + </view>
  87 + </view>
  88 + </view>
  89 + </view>
  90 + </view>
  91 + </view>
  92 + </block>
  93 + <view class="footer">
  94 + <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
  95 + <view class="footerRight">
  96 + <view
  97 + class="paybtn"
  98 + @click="toComfirmOrder"
  99 + >立即结算</view>
  100 + </view>
  101 + </view>
  102 + <BottomSheet
  103 + v-if="isShowBottom"
  104 + :isCart="isCart"
  105 + @addCart="addCart"
  106 + :sk_id="sk_id"
  107 + :propMpId="mp_id"
  108 + @chooseCartModi="chooseCartModi"
  109 + :cart_id="cart_id"
  110 + :index="cartIndex"
  111 + :pid="pid"
  112 + :goodInfo="goodInfo"
  113 + :isShowBottom="isShowBottom"
  114 + @closeBottom="closeBottom"
  115 + ></BottomSheet>
  116 + </view>
  117 +</template>
  118 +
  119 +<script>
  120 +
  121 +import store from '@/store'
  122 +import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'
  123 +export default {
  124 + components: {
  125 + BottomSheet,
  126 + },
  127 + data() {
  128 + return {
  129 + pid: Number,
  130 + isCart: Number,
  131 + sk_id: String,
  132 + mp_id: String,
  133 + isShowBottom: false, // 底部弹窗开关
  134 + cart_id: Number,
  135 + maxCount: 20,
  136 + cartIndex: Number,
  137 + cartList: [],
  138 + }
  139 + },
  140 + computed: {
  141 + pIsoPen () {
  142 + if (this.cartList.length > 0) {
  143 + return !this.cartList.find(item => !item.isChecked)
  144 + }
  145 + return false
  146 + },
  147 + goodInfo () {
  148 + return this.$store.state.read.goodInfo
  149 + },
  150 + totalPrice() {
  151 + let totalPrice = 0
  152 + this.cartList.forEach((item) => {
  153 + if (item.isChecked) {
  154 + totalPrice += item.nowPrice * item.num
  155 + }
  156 + })
  157 + return totalPrice
  158 + },
  159 + },
  160 + onShow: async function() {
  161 + await this.$store.dispatch('cart/getCartList', {
  162 + uid: this.$store.state.user.userInfo.uid, // 用户id
  163 + })
  164 +
  165 + this.cartList = this.$store.state.cart.cartList
  166 + this.cartList.forEach((item) => {
  167 + item.isChecked = false
  168 + })
  169 + },
  170 + // onLoad: async function() {
  171 + // },
  172 + methods: {
  173 + // 全选按钮
  174 + pClick() {
  175 + const pStatus = !this.cartList.find(item => !item.isChecked)
  176 + const oldList = this.cartList
  177 + oldList.forEach((item, index) => {
  178 + item.isChecked = !pStatus
  179 + this.cartList.splice(index, 1, item)
  180 + })
  181 + },
  182 + // 单选按钮
  183 + childClick(type, index) {
  184 + this.cartList[index].isChecked = !this.cartList[index].isChecked
  185 + // vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
  186 + this.cartList.splice(index, 1, this.cartList[index])
  187 + },
  188 + // 修改购物车
  189 + chooseCartModi(mp_id, sk_id, price, pid, num, cart_id, index) {
  190 + // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
  191 + store.dispatch('cart/modiCart', {
  192 + uid: this.$store.state.user.userInfo.uid,
  193 + openid: this.$store.state.user.userInfo.openid,
  194 + mp_id: mp_id,
  195 + sk_id: sk_id,
  196 + price: price,
  197 + pid: pid,
  198 + num: num,
  199 + cart_id: cart_id,
  200 + args: {
  201 + index: index,
  202 + },
  203 + })
  204 + this.$nextTick(function() {
  205 + store.dispatch('cart/getCartList', {
  206 + uid: this.$store.state.user.userInfo.uid, // 用户id
  207 + }).then(() => {
  208 + this.cartList = this.$store.state.cart.cartList
  209 + })
  210 + })
  211 + },
  212 + // 底部弹窗开关
  213 + showBottom(isCart, pid, skId, mp_id, cart_id, index) {
  214 + store.dispatch('read/fetch', {
  215 + pid,
  216 + sk_id: skId,
  217 + }).then(() => {
  218 + this.cartIndex = index
  219 + this.sk_id = skId
  220 + this.pid = pid
  221 + this.mp_id = mp_id
  222 + this.isCart = isCart
  223 + this.cart_id = cart_id
  224 + this.isShowBottom = true
  225 + })
  226 + },
  227 + closeBottom() {
  228 + this.isShowBottom = false
  229 + },
  230 + toGoods(id, skId) {
  231 + uni.navigateTo({
  232 + url: '../details/details?pid=' + id + '&sk_id=' + skId,
  233 + success: res => {},
  234 + fail: () => {},
  235 + complete: () => {},
  236 + })
  237 + },
  238 +
  239 + toComfirmOrder() {
  240 + this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
  241 + if (this.$store.state.cart.checkedCartLst.length > 0) {
  242 + uni.navigateTo({
  243 + url: '../confirmOrder/confirmOrder?isCart=true',
  244 + })
  245 + } else {
  246 + uni.showToast({
  247 + title: '您还没有选择宝贝哦~',
  248 + icon: 'none',
  249 + })
  250 + }
  251 + },
  252 + counter(index, isadd, item) {
  253 + // console.log('item=====>', item)
  254 + // console.log('num=====>', item.num)
  255 + const nums = parseInt(item.num)
  256 + if (isadd) {
  257 + if (nums >= this.maxCount) {
  258 + this.addDisabled = true
  259 + } else {
  260 + this.addDisabled = true
  261 + store.dispatch('cart/modiCart', {
  262 + uid: this.$store.state.user.userInfo.uid,
  263 + openid: this.$store.state.user.userInfo.openid,
  264 + mp_id: item.mp_id,
  265 + sk_id: item.sk_id,
  266 + price: item.nowPrice,
  267 + pid: item.pid,
  268 + num: nums + 1,
  269 + cart_id: item.cart_id,
  270 + args: {
  271 + index: index,
  272 + isadd: isadd,
  273 + },
  274 + })
  275 + this.addDisabled = false
  276 + }
  277 + } else {
  278 + if (nums <= 1) {
  279 + this.desDisabled = true
  280 + } else {
  281 + this.desDisabled = false
  282 +
  283 + store.dispatch('cart/modiCart', {
  284 + uid: this.$store.state.user.userInfo.uid,
  285 + openid: this.$store.state.user.userInfo.openid,
  286 + mp_id: item.mp_id,
  287 + sk_id: item.sk_id,
  288 + price: item.nowPrice,
  289 + pid: item.pid,
  290 + num: nums - 1,
  291 + cart_id: item.cart_id,
  292 + args: {
  293 + index: index,
  294 + isadd: isadd,
  295 + },
  296 + })
  297 + this.desDisabled = true
  298 + }
  299 + }
  300 + },
  301 + delCart(cart_id, index) {
  302 + cart_id = parseInt(cart_id)
  303 + uni.showModal({
  304 + title: '是否删除该商品',
  305 + success: function (res) {
  306 + if (res.confirm) {
  307 + store.dispatch('cart/delCart', {
  308 + uid: this.$store.state.user.userInfo.uid,
  309 + openid: this.$store.state.user.userInfo.openid,
  310 + cart_id: cart_id, // 要修改的购物车id
  311 + arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
  312 + })
  313 + }
  314 + }.bind(this),
  315 + })
  316 + // this.cartList.splice(index,1)
  317 + },
  318 + },
  319 +}
  320 +</script>
  321 +
  322 +<style lang="scss">
  323 +.content {
  324 + min-height: 100vh;
  325 + background-color: #f2f2f2;
  326 + display: flex;
  327 + flex-direction: column;
  328 + align-items: center;
  329 + justify-content: space-between;
  330 + padding: 20rpx 40rpx;
  331 + box-sizing: border-box;
  332 +
  333 + .partentCheck {
  334 + width: 16px;
  335 + height: 16px;
  336 + border-radius: 22px;
  337 + border: 1px solid #cfcfcf;
  338 + background-color: #ffffff;
  339 + margin: 24rpx 12rpx 24rpx 24rpx;
  340 + }
  341 + .partentChecked {
  342 + width: 18px;
  343 + height: 18px;
  344 + border-radius: 22px;
  345 + background-color: #ff6b4a;
  346 + margin: 24rpx 12rpx 24rpx 24rpx;
  347 + .correct {
  348 + display: inline-block;
  349 + position: relative;
  350 + width: 10rpx;
  351 + height: 2rpx;
  352 + background: #ffffff;
  353 + line-height: 0;
  354 + font-size: 0;
  355 + position: relative;
  356 + top: -7px;
  357 + left: 4px;
  358 + -webkit-transform: rotate(45deg);
  359 + }
  360 + .correct:after {
  361 + content: "/";
  362 + display: block;
  363 + width: 16rpx;
  364 + height: 2rpx;
  365 + background: #ffffff;
  366 + -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
  367 + }
  368 + }
  369 +
  370 + .card {
  371 + background-color: #ffffff;
  372 + border-radius: 16rpx;
  373 + box-sizing: border-box;
  374 + padding: 36rpx 36rpx 36rpx 18rpx;
  375 + display: flex;
  376 + flex-direction: column;
  377 + align-items: center;
  378 + justify-content: space-between;
  379 + margin-bottom: 180rpx;
  380 + .cardHeader {
  381 + width: 100%;
  382 + height: 36rpx;
  383 + display: flex;
  384 + align-items: center;
  385 + justify-content: flex-start;
  386 + margin-bottom: 20rpx;
  387 + image {
  388 + height: 32rpx;
  389 + width: 32rpx;
  390 + padding-left: 6px;
  391 + padding-right: 10px;
  392 + }
  393 + text {
  394 + // font-family: PingFangSC-Regular;
  395 + font-size: 14px;
  396 + color: #333333;
  397 + letter-spacing: -0.26px;
  398 + }
  399 + }
  400 + .cardBody {
  401 + width: 100%;
  402 + min-height: 300rpx;
  403 + display: flex;
  404 + align-items: center;
  405 + justify-content: space-between;
  406 + .goodInfo {
  407 + width: 390rpx;
  408 + display: flex;
  409 + flex-direction: row;
  410 + justify-content: flex-start;
  411 + padding-left: 6px;
  412 +
  413 + .imageWrap {
  414 + height: 188rpx;
  415 + width: 188rpx;
  416 + margin-right: 28rpx;
  417 +
  418 + image {
  419 + border-radius: 4px;
  420 + height: 188rpx;
  421 + width: 188rpx;
  422 + }
  423 + }
  424 + .infoRight {
  425 + display: flex;
  426 + flex-direction: column;
  427 + align-items: flex-start;
  428 + justify-content: space-between;
  429 + min-height: 240rpx;
  430 + width: 100%;
  431 + .goodName {
  432 + display: -webkit-box;
  433 + -webkit-box-orient: vertical;
  434 + -webkit-line-clamp: 2;
  435 + text-align: justify;
  436 + overflow: hidden;
  437 + font-size: 28rpx;
  438 + color: #333333;
  439 + }
  440 + .describ {
  441 + width: 100%;
  442 + min-height: 80rpx;
  443 + background: #f9f9f9;
  444 + border-radius: 2px;
  445 + box-sizing: border-box;
  446 + padding: 10rpx;
  447 + font-size: 20rpx;
  448 + letter-spacing: -0.23px;
  449 + color: #999999;
  450 + display: flex;
  451 + justify-content: space-between;
  452 + align-items: center;
  453 + .desL {
  454 + view {
  455 + margin: 10rpx 0 10rpx 0;
  456 + }
  457 + }
  458 + }
  459 + .priceBox {
  460 + display: flex;
  461 + justify-content: space-between;
  462 + align-items: center;
  463 + // margin-top: 26px;
  464 + width: 100%;
  465 + font-size: 14px;
  466 + color: #999999;
  467 + .maxCount {
  468 + color: #999999;
  469 + font-size: 20rpx;
  470 + }
  471 + .price {
  472 + color: #ff6b4a;
  473 + font-size: 28rpx;
  474 + }
  475 + .counter {
  476 + display: flex;
  477 + flex-direction: row;
  478 + justify-content: space-between;
  479 + align-items: center;
  480 + font-size: 28rpx;
  481 + color: #333333;
  482 + width: 122rpx;
  483 + .btn {
  484 + display: flex;
  485 + justify-content: center;
  486 + line-height: 32rpx;
  487 + height: 32rpx;
  488 + width: 32rpx;
  489 + background-color: #f2f2f2;
  490 + color: #cfcfcf;
  491 + }
  492 + }
  493 + }
  494 + }
  495 + }
  496 + }
  497 + }
  498 + .footer {
  499 + position: fixed;
  500 + left: 0;
  501 + bottom: 0px;
  502 + height: 112rpx;
  503 + width: 100%;
  504 + background-color: #ffffff;
  505 + font-size: 16px;
  506 + display: flex;
  507 + justify-content: space-between;
  508 + align-items: center;
  509 + .footerLeft {
  510 + display: flex;
  511 + justify-content: center;
  512 + align-items: center;
  513 + width: 50%;
  514 + color: #333333;
  515 + text {
  516 + color: #ff6b4a;
  517 + }
  518 + }
  519 + .footerRight {
  520 + display: flex;
  521 + justify-content: flex-end;
  522 + align-items: center;
  523 + width: 50%;
  524 + margin-right: 26rpx;
  525 + .paybtn {
  526 + display: flex;
  527 + justify-content: center;
  528 + align-items: center;
  529 + background: #ff6b4a;
  530 + border-radius: 20px;
  531 + border-radius: 20px;
  532 + color: #ffffff;
  533 + width: 204rpx;
  534 + height: 80rpx;
  535 + }
  536 + }
  537 + }
  538 +}
  539 +/* 隐藏滚动条 */
  540 +::-webkit-scrollbar {
  541 + width: 0;
  542 + height: 0;
  543 + color: transparent;
  544 +}
  545 +</style>
... ...
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @7614465
... ... @@ -34,7 +34,7 @@
34 34 </view>
35 35 <view class="order-user-body">
36 36 <image src="../../static/myorder-paying-location.png"></image>
37   - <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
  37 + <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
38 38 </view>
39 39 <image
40 40 class="arrow"
... ... @@ -52,18 +52,77 @@
52 52 ></image>
53 53 <text>非常戴镜</text>
54 54 </view>
55   - <view class="infoBox">
  55 +
  56 + <view
  57 + class="infoBox"
  58 + v-if="isCart == 'true'"
  59 + v-for="(item, index) in checkedCartLst"
  60 + :key="index"
  61 + >
  62 + <view class="infoTop">
  63 + <image
  64 + :src="item.img_index_url"
  65 + mode="aspectFill"
  66 + ></image>
  67 + <view class="infoRight">
  68 + <text class="goodName">{{item.p_name}}</text>
  69 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  70 + <view class="priceBox">
  71 + <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
  72 + ¥{{item.oldPrice*item.num}}
  73 + </text></view>
  74 + <view class="counter">
  75 + <view
  76 + class="btn"
  77 + disabled="this.disabled"
  78 + type="default"
  79 + @click="counter(false,index)"
  80 + >-</view>
  81 + <text>{{checkedCartLst[index].num}}</text>
  82 + <view
  83 + class="btn"
  84 + type="default"
  85 + @click="counter(true,index)"
  86 + >+</view>
  87 + </view>
  88 + </view>
  89 + </view>
  90 + </view>
  91 + <view class="infoBottom">
  92 + <view class="norm">规格 <text>
  93 + <!-- 长度超出变省略号未做 -->
  94 + <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
  95 + </block>
  96 + </text></view>
  97 + <view class="shippingMethod">使用人 <text>
  98 + {{item.peopleName}}
  99 + </text></view>
  100 + <view class="shippingMethod">配送方式 <text>快递</text></view>
  101 + <view class="message">买家留言
  102 + <input
  103 + type="text"
  104 + :value="note"
  105 + placeholder="建议提前协商(50字以内)"
  106 + />
  107 + </view>
  108 + </view>
  109 + </view>
  110 +
  111 + <view
  112 + class="infoBox"
  113 + v-if="isCart !== 'true'"
  114 + >
56 115 <view class="infoTop">
57 116 <image
58   - :src="goodInfo.img_index_url"
  117 + :src="buyItem.pic"
59 118 mode="aspectFill"
60 119 ></image>
61 120 <view class="infoRight">
62   - <text class="goodName">商品名称商品名称商品名称名称名称</text>
  121 + <text class="goodName">{{goodInfo.p_name}}</text>
63 122 <text class="remarks">支持7天无理由退货 顺丰发货</text>
64 123 <view class="priceBox">
65   - <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
66   - ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
  124 + <view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
  125 + ¥{{buyItem.out_price * count}}
67 126 </text></view>
68 127 <view class="counter">
69 128 <view
... ... @@ -91,6 +150,9 @@
91 150 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
92 151 </block>
93 152 </text></view>
  153 + <view class="shippingMethod">使用人 <text>
  154 + {{name}}
  155 + </text></view>
94 156 <view class="shippingMethod">配送方式 <text>快递</text></view>
95 157 <view class="message">买家留言
96 158 <input
... ... @@ -146,7 +208,8 @@
146 208 <view class="item">
147 209 <text>合计</text>
148 210 <view class="itemRight">
149   - <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
  211 + <view class="total">¥{{totalPrice}}</view>
  212 + <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
150 213 </view>
151 214 </view>
152 215 </view>
... ... @@ -161,7 +224,10 @@
161 224 </view>
162 225 <view class="last_zhanwei"></view>
163 226 <view class="footer">
164   - <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
  227 + <view class="footerLeft">实付金额:
  228 + <text>¥{{totalPrice}}</text>
  229 + <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
  230 + </view>
165 231 <view class="footerRight">
166 232 <view
167 233 class="paybtn"
... ... @@ -179,6 +245,7 @@ import MD5Util from &#39;../../utils/md5&#39;
179 245 export default {
180 246 data() {
181 247 return {
  248 + name: String,
182 249 addAddress: '添加收货地址',
183 250 count: 1,
184 251 pid: 0,
... ... @@ -189,11 +256,41 @@ export default {
189 256 addressInfo: {
190 257 address: '',
191 258 },
  259 + isCart: Boolean,
192 260 // isAnonymous:
  261 + checkedCartLst: [],
193 262 }
194 263 },
195   - onLoad({ pid, addressId, isCart }) {
196   - this.pid = pid
  264 + onShow(addressId) {
  265 + // console.log('+-+-*-*-+-+',addressId)
  266 + if (addressId) {
  267 + store
  268 + .dispatch('address/details', {
  269 + add_id: addressId,
  270 + })
  271 + .then(({ code, data }) => {
  272 + if (code === 1) {
  273 + // console.log('code', code, data)
  274 + this.showAddress = true
  275 + this.addressInfo = data
  276 + }
  277 + })
  278 + }
  279 + },
  280 + onLoad({ pid, addressId, isCart, count, name }) {
  281 + if (isCart == 'false') {
  282 + this.pid = pid
  283 + // store.dispatch('read/fetch', {
  284 + // pid,
  285 + // })
  286 + }
  287 + this.count = count
  288 + this.name = name
  289 + this.isCart = isCart
  290 +
  291 + console.log('++++++++++++' + pid, addressId, isCart)
  292 + this.checkedCartLst = this.$store.state.cart.checkedCartLst
  293 + // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
197 294 // 若已经选择地址
198 295 if (addressId) {
199 296 store
... ... @@ -202,7 +299,7 @@ export default {
202 299 })
203 300 .then(({ code, data }) => {
204 301 if (code === 1) {
205   - console.log('code', code, data)
  302 + // console.log('code', code, data)
206 303 this.showAddress = true
207 304 this.addressInfo = data
208 305 }
... ... @@ -210,19 +307,34 @@ export default {
210 307 } else {
211 308 store.dispatch('address/default').then(({ code, data }) => {
212 309 if (code === 1) {
213   - console.log('code', code, data)
  310 + // console.log('code', code, data)
214 311 this.showAddress = true
215 312 this.addressInfo = data
216 313 }
217 314 })
218 315 }
219   - store.dispatch('read/fetch', {
220   - pid,
221   - })
222 316 },
223 317 computed: {
  318 + totalPrice() {
  319 + if (this.isCart == 'true') {
  320 + let total = 0
  321 + this.$store.state.cart.checkedCartLst.map(item => {
  322 + total += item.nowPrice * item.num
  323 + })
  324 + return total
  325 + } else {
  326 + return this.buyItem.real_price * this.count
  327 + }
  328 + },
  329 + buyItem() {
  330 + return this.$store.state.cart.buyItem
  331 + },
  332 + // checkedCartLst(){
  333 + // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
  334 + // return this.$store.state.cart.checkedCartLst
  335 + // },
224 336 goodInfo() {
225   - console.log('state', this.$store.state)
  337 + // console.log('state', this.$store.state.read.goodInfo)
226 338 return this.$store.state.read.goodInfo
227 339 },
228 340 skuInfo() {
... ... @@ -236,11 +348,19 @@ export default {
236 348 },
237 349 },
238 350 methods: {
239   - counter(isadd) {
  351 + counter(isadd, index) {
240 352 if (isadd) {
241   - this.count++
  353 + if (this.isCart == 'true') {
  354 + this.checkedCartLst[index].num++
  355 + } else {
  356 + this.count++
  357 + }
242 358 } else {
243   - this.count <= 1 ? (this.disabled = true) : this.count--
  359 + if (this.isCart == 'true') {
  360 + this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
  361 + } else {
  362 + this.count <= 1 ? (this.disabled = true) : this.count--
  363 + }
244 364 }
245 365 },
246 366 // 跳转添加地址页面
... ... @@ -259,20 +379,38 @@ export default {
259 379 uni.showLoading({
260 380 title: '支付中',
261 381 })
262   - console.log('this', this.$store.state)
263   - const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
264   - store.dispatch('order/buyNow', {
265   - pid: skId.pid,
266   - sk_id: skId.sk_id,
267   - number: this.count,
268   - mp_id: mpId,
269   - address: JSON.stringify(this.addressInfo),
270   - totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
271   - liuyan: this.note,
272   - dir: 1,
273   - }).then((res) => {
274   - this.pay(res.data)
275   - })
  382 + if (this.isCart === 'true') {
  383 + const checkedGoods = []
  384 + const sk_id_arr = []
  385 + this.checkedCartLst.map(item => {
  386 + checkedGoods.push(item.cart_id)
  387 + sk_id_arr.push(item.sk_id)
  388 + })
  389 + store.dispatch('order/build', {
  390 + uid: this.$store.state.user.userInfo.uid,
  391 + address: JSON.stringify(this.addressInfo),
  392 + checkedGoods: checkedGoods,
  393 + sk_id_arr: sk_id_arr,
  394 + totalPrice: this.totalPrice,
  395 + }).then((res) => {
  396 + this.pay(res)
  397 + })
  398 + }
  399 + if (this.isCart === 'false') {
  400 + const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
  401 + store.dispatch('order/buyNow', {
  402 + pid: skId.pid,
  403 + sk_id: skId.sk_id,
  404 + number: this.count,
  405 + mp_id: mpId,
  406 + address: JSON.stringify(this.addressInfo),
  407 + totalPrice: this.totalPrice,
  408 + liuyan: this.note,
  409 + dir: 1,
  410 + }).then((res) => {
  411 + this.pay(res)
  412 + })
  413 + }
276 414 },
277 415 // 支付
278 416 pay(res) {
... ... @@ -287,7 +425,7 @@ export default {
287 425 uid: this.$store.state.user.userInfo.uid,
288 426 shopid: 0,
289 427 payCate: 2020,
290   - payMoney: Number(this.skuInfo.real_price) * this.count * 100,
  428 + payMoney: this.totalPrice,
291 429 payWoodId: `fcdj-${uid}-${keyName}`,
292 430 payWoodDesc: '在【非常戴镜】的微信付款凭证',
293 431 nonceStr,
... ... @@ -308,7 +446,7 @@ export default {
308 446 appId: data.appid,
309 447 timeStamp,
310 448 nonceStr,
311   - total_fee: Number(this.skuInfo.real_price) * this.count * 100,
  449 + total_fee: this.totalPrice,
312 450 package: `prepay_id=${data.prepay_id}`,
313 451 signType: 'MD5',
314 452 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
... ... @@ -320,7 +458,7 @@ export default {
320 458 })
321 459 // 跳转订单详情页->状态 待收货
322 460 uni.reLaunch({
323   - url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
  461 + url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
324 462 })
325 463 },
326 464 fail: (res) => {
... ... @@ -331,7 +469,7 @@ export default {
331 469 })
332 470 // 跳转订单详情页->状态 待付款
333 471 uni.reLaunch({
334   - url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
  472 + url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
335 473 })
336 474 },
337 475 complete: () => {
... ... @@ -399,7 +537,7 @@ export default {
399 537 box-sizing: border-box;
400 538 .orderInfo {
401 539 width: 670rpx;
402   - height: 488rpx;
  540 + min-height: 488rpx;
403 541 background-color: #ffffff;
404 542 border-radius: 20rpx;
405 543 box-sizing: border-box;
... ... @@ -448,6 +586,9 @@ export default {
448 586 .price {
449 587 color: #ff6b4a;
450 588 font-size: 28rpx;
  589 + text{
  590 + margin-left: 10rpx;
  591 + }
451 592 }
452 593 .originCost {
453 594 text-decoration: line-through;
... ... @@ -586,6 +727,7 @@ export default {
586 727 align-items: center;
587 728 position: fixed;
588 729 bottom: 0;
  730 + z-index: 9999;
589 731 .footerLeft {
590 732 display: flex;
591 733 justify-content: center;
... ... @@ -629,7 +771,8 @@ export default {
629 771 height: 108rpx;
630 772 width: 100%;
631 773 align-items: center;
632   - margin-left: 126rpx;
  774 + padding-left: 126rpx;
  775 + box-sizing: border-box;
633 776 .name {
634 777 display: flex;
635 778 justify-content: space-between;
... ... @@ -684,7 +827,7 @@ export default {
684 827 bottom: 104rpx;
685 828 }
686 829 }
687   -.last_zhanwei{
  830 +.last_zhanwei {
688 831 background: #f2f2f2;
689 832 height: 60px;
690 833 }
... ...
src/pages/details/components/AfterSails.vue
Diff comments   View file @7614465
... ... @@ -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/components/Introduce.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,144 @@
  1 +<template>
  2 + <view class="introduce">
  3 + <!-- 迭代时建议配合接口修改 为数组 -->
  4 + <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
  5 + <view>
  6 + 年龄：<view
  7 + v-for="(item,index) in tag.prod_tag_age"
  8 + :key="index"
  9 + >
  10 + {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
  11 + </view>
  12 + </view>
  13 + </view>
  14 + <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
  15 + <view>
  16 + 颜色：<view
  17 + v-for="(item,index) in tag.prod_tag_color"
  18 + :key="index"
  19 + >
  20 + {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
  25 + <view>
  26 + 脸型：<view
  27 + v-for="(item,index) in tag.prod_tag_face"
  28 + :key="index"
  29 + >
  30 + {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
  31 + </view>
  32 + </view>
  33 + </view>
  34 + <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
  35 + <view>
  36 + 赠品：<view
  37 + v-for="(item,index) in tag.prod_tag_freesend"
  38 + :key="index"
  39 + >
  40 + {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
  41 + </view>
  42 + </view>
  43 + </view>
  44 + <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
  45 + <view>
  46 + 保险：<view
  47 + v-for="(item,index) in tag.prod_tag_insurance"
  48 + :key="index"
  49 + >
  50 + {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
  51 + </view>
  52 + </view>
  53 + </view>
  54 + <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
  55 + <view>
  56 + 材质：<view
  57 + v-for="(item,index) in tag.prod_tag_metal"
  58 + :key="index"
  59 + >
  60 + {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
  61 + </view>
  62 + </view>
  63 + </view>
  64 + <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
  65 + <view>
  66 + 个性：<view
  67 + v-for="(item,index) in tag.prod_tag_personal"
  68 + :key="index"
  69 + >
  70 + {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
  71 + </view>
  72 + </view>
  73 + </view>
  74 + <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
  75 + <view>
  76 + 场景：<view
  77 + v-for="(item,index) in tag.prod_tag_sense"
  78 + :key="index"
  79 + >
  80 + {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
  85 + <view>
  86 + 性别：<view
  87 + v-for="(item,index) in tag.prod_tag_sex"
  88 + :key="index"
  89 + >
  90 + {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
  91 + </view>
  92 + </view>
  93 + </view>
  94 + <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
  95 + <view>
  96 + 风格：<view
  97 + v-for="(item,index) in tag.prod_tag_style"
  98 + :key="index"
  99 + >
  100 + {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
  101 + </view>
  102 + </view>
  103 + </view>
  104 + <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
  105 + <view>
  106 + 重量：<view
  107 + v-for="(item,index) in tag.prod_tag_weight"
  108 + :key="index"
  109 + >
  110 + {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
  111 + </view>
  112 + </view>
  113 + </view>
  114 + </view>
  115 +</template>
  116 +
  117 +<script>
  118 +export default {
  119 + props: {
  120 + tag: Object,
  121 + },
  122 + created() {
  123 + },
  124 + updated() {
  125 + },
  126 +}
  127 +</script>
  128 +
  129 +<style lang="scss" scoped>
  130 +.introduce {
  131 + margin-bottom: 4px;
  132 + view {
  133 + display: flex;
  134 + align-content: center;
  135 + font-size: 14px;
  136 + color: #333333;
  137 + }
  138 + span {
  139 + margin-left: 6px;
  140 + margin-right: 5px;
  141 + font-family: "PingFangSC-Regular";
  142 + }
  143 +}
  144 +</style>
... ...
src/pages/details/details.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,717 @@
  1 +<template>
  2 + <view class="container">
  3 + <!-- 基础信息 -->
  4 + <view class="basic_info">
  5 + <!-- 轮播图 -->
  6 + <swiper
  7 + class="swiperImage"
  8 + :indicator-dots="true"
  9 + :autoplay="true"
  10 + :interval="4000"
  11 + :duration="500"
  12 + >
  13 + <swiper-item
  14 + v-for="(item, index) in carousel"
  15 + :key="index"
  16 + >
  17 + <image
  18 + :src="item"
  19 + mode="scaleToFill"
  20 + ></image>
  21 + </swiper-item>
  22 + </swiper>
  23 + <!-- 产品价格及购买人数 -->
  24 + <view class="info_pay">
  25 + <view>￥{{goodsInfo.price || '暂无'}}<span
  26 + v-if="goodsInfo.discountPrice"
  27 + class="info_pay_discount"
  28 + >¥{{goodsInfo.discountPrice}}</span></view>
  29 + <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
  30 + </view>
  31 + <!-- 产品名称 -->
  32 + <view class="info_name">
  33 + <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
  34 + <view
  35 + @tap="confirmShare"
  36 + class="info_name_share"
  37 + >
  38 + <image src="/static/img/detail/share-icon.png"></image>
  39 + <text>分享</text>
  40 + </view>
  41 + </view>
  42 + <!-- 产品售后信息 -->
  43 + <view class="info_after">
  44 + <span>支持7天无理由退货</span>
  45 + <span>顺丰发货</span>
  46 + <span>30天质量保证</span>
  47 + </view>
  48 + </view>
  49 + <!-- 详细信息 -->
  50 + <view class="detail_info">
  51 + <!-- 详细信息菜单 -->
  52 + <view class="screen_bar">
  53 + <view
  54 + v-for="(item, index) in screenItems"
  55 + :key="index"
  56 + @click="tabChange(index)"
  57 + >
  58 + <view
  59 + class="screen_item"
  60 + v-bind:class="{ item_active: item_current === index }"
  61 + >{{ screenItems[index] || '暂无' }}</view>
  62 + </view>
  63 + </view>
  64 + <!-- 商品介绍 -->
  65 + <view
  66 + class="screen_item"
  67 + v-if="item_current === 0"
  68 + >
  69 + <Introduce :tag="tag" />
  70 + </view>
  71 + <!-- 规格参数 -->
  72 + <view
  73 + class="screen_item"
  74 + v-if="item_current === 1"
  75 + >
  76 + <view class="specification">
  77 + <view
  78 + class="spe_item"
  79 + v-for="(item, index) in specification"
  80 + :key="index"
  81 + >
  82 + <image
  83 + class="spe_image"
  84 + v-bind:src="item.img"
  85 + ></image>
  86 + <span>{{item.standard || '暂无'}}</span>
  87 + <span>{{item.slength || '暂无'}}</span>
  88 + </view>
  89 + </view>
  90 + </view>
  91 + <!-- 售后保障 -->
  92 + <view
  93 + class="screen_item"
  94 + v-if="item_current === 2"
  95 + >
  96 + <AfterSails />
  97 + </view>
  98 + </view>
  99 + <!-- 评价 -->
  100 + <template v-if="item_current !== 2">
  101 + <view class="evaluate">
  102 + <!-- 标题 -->
  103 + <view class="evaluate_title">
  104 + <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
  105 + <!-- 星星 -->
  106 + <view class="evaluate_star">
  107 + <view
  108 + class="star"
  109 + v-for="(item, index) in evaluate.star"
  110 + :key="index"
  111 + >
  112 + <image
  113 + src="../../static/img/detail/d_star.png"
  114 + mode="aspectFill"
  115 + style="height: 26rpx; width: 28rpx;"
  116 + ></image>
  117 + </view>
  118 + </view>
  119 + </view>
  120 + <!-- 标签 -->
  121 + <view class="evaluate_tag">
  122 + <view
  123 + v-for="(item, index) in evaluate.tag"
  124 + :key="index"
  125 + >{{item.name}}</view>
  126 + </view>
  127 + </view>
  128 + </template>
  129 + <!-- 商品详情页 -->
  130 + <template v-if="current !==2">
  131 + <view class="more_info">
  132 + <view
  133 + class="more_fixed1"
  134 + @click="consolg(goodInfo.prodIntro1)"
  135 + >
  136 + <image src="/static/img/detail/hr.png"></image>
  137 + <view>商品详情</view>
  138 + <image src="/static/img/detail/hr.png"></image>
  139 + </view>
  140 + <view
  141 + class="more_all"
  142 + v-html="more"
  143 + >
  144 + </view>
  145 + </view>
  146 + </template>
  147 + <!-- 底部菜单 -->
  148 + <view class="menu">
  149 + <view
  150 + @tap="toCart()"
  151 + class="menu_1"
  152 + >
  153 + <view class="cart_icon">
  154 + <image src="/static/tab-cart.png" />
  155 + <text>{{cartNumber}}</text>
  156 + </view>
  157 + <view class="menu_image">购物车</view>
  158 + </view>
  159 + <view class="menu_2">
  160 + <view
  161 + class="menu_input"
  162 + @tap="showBottom(1)"
  163 + >加入购物车</view>
  164 + <view
  165 + class="menu_now"
  166 + @click="showBottom(2)"
  167 + >立即购买</view>
  168 + </view>
  169 + </view>
  170 + <!-- 参数选择 -->
  171 + <template v-if="isShowBottom">
  172 + <BottomSheet
  173 + :isCart="isCart"
  174 + @addCart="addCart"
  175 + :pid="pid"
  176 + :goodInfo="goodInfo"
  177 + :isShowBottom="isShowBottom"
  178 + @closeBottom="closeBottom"
  179 + ></BottomSheet>
  180 + </template>
  181 + <!-- 分享 -->
  182 + <template>
  183 + <uni-popup
  184 + ref="popupShare"
  185 + type="share"
  186 + >
  187 + <uni-popup-share @select="selectShare"></uni-popup-share>
  188 + </uni-popup>
  189 + </template>
  190 + <!-- 分享海报 -->
  191 + <template>
  192 + <uni-popup
  193 + ref="uniPopupPost"
  194 + type="center"
  195 + >
  196 + <uni-popup-post :postUrl="postUrl"></uni-popup-post>
  197 + </uni-popup>
  198 + </template>
  199 + </view>
  200 +</template>
  201 +
  202 +<script>
  203 +import store from '@/store'
  204 +import Introduce from './components/Introduce' // 商品介绍基本信息组件
  205 +import AfterSails from './components/AfterSails' // 售后保障组件
  206 +import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
  207 +import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
  208 +import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
  209 +
  210 +export default {
  211 + components: {
  212 + Introduce,
  213 + AfterSails,
  214 + BottomSheet,
  215 + uniPopupShare,
  216 + uniPopupPost,
  217 + },
  218 + data () {
  219 + return {
  220 + pid: 7, // 产品ID
  221 + skId: undefined, // skuId
  222 + // 详细信息菜单
  223 + item_current: 0,
  224 + screenItems: [
  225 + '商品介绍',
  226 + '规格参数',
  227 + '售后保障',
  228 + ],
  229 + showPostImg: false, // 是否展示分享海报
  230 + isShowBottom: false, // 是否展示参数选择
  231 + isCart: 1, // 参数选择 按钮判断
  232 + }
  233 + },
  234 + onLoad({ pid = this.pid, sk_id: skId }) {
  235 + // 根据页面传参请求页面数据
  236 + this.pid = pid
  237 + this.skId = skId
  238 +
  239 + // 获取产品详情
  240 + this.getDetails({ pid, skId })
  241 + // 获取购物车数据
  242 + this.getCartNum()
  243 + },
  244 + computed: {
  245 + // 获取轮播图数据
  246 + goodInfo() {
  247 + return this.$store.state.details.goodInfo
  248 + },
  249 + // 获取轮播图数据
  250 + carousel() {
  251 + return this.$store.state.details.carousel
  252 + },
  253 + // 商品基本信息
  254 + goodsInfo() {
  255 + return this.$store.state.details.goodsInfo
  256 + },
  257 + // 商品介绍商品标签
  258 + tag() {
  259 + return this.$store.state.details.tag
  260 + },
  261 + // 规格参数
  262 + specification() {
  263 + return this.$store.state.details.specification
  264 + },
  265 + // 评价
  266 + evaluate() {
  267 + return this.$store.state.details.evaluate
  268 + },
  269 + // 商品详情
  270 + more() {
  271 + return this.$store.state.details.more
  272 + },
  273 + // 购物车数目
  274 + cartNumber() {
  275 + return this.$store.state.details.cartNumber
  276 + },
  277 + // 购物车数目
  278 + skuList() {
  279 + return this.$store.state.details.skuList
  280 + },
  281 + // 分享海报
  282 + postUrl() {
  283 + return this.$store.state.details.postUrl
  284 + },
  285 + },
  286 + methods: {
  287 + // 获取产品详情
  288 + getDetails({ pid, skId }) {
  289 + store.dispatch('details/details', {
  290 + pid,
  291 + sk_id: skId,
  292 + })
  293 + store.dispatch('read/fetch', {
  294 + pid,
  295 + sk_id: skId,
  296 + })
  297 + },
  298 + // 获取购物车数目
  299 + getCartNum() {
  300 + store.dispatch('details/getCartNumber')
  301 + },
  302 + // 切换详细信息菜单
  303 + tabChange (e) {
  304 + if (this.current !== e) {
  305 + this.item_current = e
  306 + }
  307 + },
  308 + // 打开分享界面
  309 + confirmShare() {
  310 + this.$refs.popupShare.open()
  311 + },
  312 + // 选择分享
  313 + selectShare(e, done) {
  314 + switch (e.item.name) {
  315 + // 分享到好物圈
  316 + case 'recommend':
  317 + this.shareRecommend()
  318 + break
  319 + // 分享到朋友圈
  320 + case 'friend':
  321 + break
  322 + // 生成海报
  323 + case 'poster':
  324 + uni.showLoading({
  325 + title: '生成图片中',
  326 + })
  327 + this.sharePost()
  328 + break
  329 + default:
  330 + break
  331 + }
  332 + done()
  333 + },
  334 + // 分享到好物圈
  335 + shareRecommend() {
  336 + if (wx.openBusinessView) {
  337 + wx.openBusinessView({
  338 + businessType: 'friendGoodsRecommend',
  339 + extraData: {
  340 + product: {
  341 + item_code: '58_68',
  342 + title: this.goodsInfo.name,
  343 + image_list: this.carousel,
  344 + },
  345 + },
  346 + success: function (res) {
  347 + uni.showToast({
  348 + title: '好物圈分享成功！',
  349 + icon: 'none',
  350 + duration: 2000,
  351 + })
  352 + // 向服务器报告这个事情
  353 + // TODO:::记录这个用户的推广过程。
  354 + console.log('好物圈分享成功！', res)
  355 + },
  356 + fail: function (res) {
  357 + console.log('好物圈分享失败！', res)
  358 + },
  359 + })
  360 + }
  361 + },
  362 + // 分享到朋友/圈
  363 + shareFriend() {
  364 + this.onShareAppMessage()
  365 + },
  366 + // 朋友圈设置页面
  367 + onShareAppMessage() {
  368 + let myName = this.$store.state.user.userInfo.nickName
  369 + if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
  370 + myName = '【神秘人】'
  371 + } else {
  372 + myName = '【' + myName + '】'
  373 + }
  374 + return {
  375 + title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
  376 + path: '/pages/details/details?sid=0&pid=' + this.pid,
  377 + imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  378 + success: function (res) {
  379 + if (res.errMsg === 'shareAppMessage:ok') {
  380 + console.log('分享成功！', res)
  381 + }
  382 + },
  383 + fail: function (res) {
  384 + if (res.errMsg === 'shareAppMessage:fail cancel') {
  385 + console.log('fail', '放弃分享')
  386 + } else if (res.errMsg === 'shareAppMessage:fail') {
  387 + console.log('fail', '分享失败')
  388 + }
  389 + },
  390 + }
  391 + },
  392 + // 生成海报
  393 + sharePost() {
  394 + const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
  395 +
  396 + store.dispatch('details/post', {
  397 + pid: this.pid,
  398 + sid: fromsid === 'undefined' ? 0 : fromsid,
  399 + }).then((data) => {
  400 + uni.hideLoading()
  401 + this.$refs.uniPopupPost.open()
  402 + })
  403 + },
  404 + // 参数选择弹窗开关
  405 + showBottom(isCart) {
  406 + this.isCart = isCart
  407 + this.isShowBottom = true
  408 + },
  409 + closeBottom() {
  410 + this.isShowBottom = false
  411 + },
  412 + // 前往购物车
  413 + toCart() {
  414 + uni.switchTab({
  415 + url: '/pages/cart/cart',
  416 + success: res => {},
  417 + fail: (error) => { console.log('跳转购物车失败======>', error) },
  418 + complete: () => { console.log('toCart') },
  419 + })
  420 + },
  421 + // 加入购物车
  422 + addCart (mpId, num, checkedSKU, skId, price) {
  423 + const addCartList = {}
  424 + addCartList.mp_id = mpId
  425 + addCartList.sk_id = skId
  426 + addCartList.num = num
  427 + // addCartList.checkedSKU = checkedSKU
  428 + addCartList.pid = this.pid
  429 + addCartList.price = price
  430 + console.log('添加购物车的参数', addCartList)
  431 + store.dispatch('cart/addCart', addCartList).then((res) => {
  432 + if (res.code === 1) {
  433 + uni.showToast({
  434 + title: '添加成功~',
  435 + icon: 'success',
  436 + })
  437 + }
  438 + // 再次请求购物车接口，实现实时更新
  439 + store.dispatch('details/getCartNumber')
  440 + })
  441 + },
  442 + },
  443 +}
  444 +</script>
  445 +
  446 +<style lang="scss">
  447 +.container {
  448 + background-color: #f8f8f8;
  449 + font-family: "PingFangSC-Regular";
  450 + // 板块样式
  451 + > view {
  452 + background: #ffffff;
  453 + margin-bottom: 10px;
  454 + padding: 8px 20px 8px 20px;
  455 + box-sizing: border-box;
  456 + }
  457 + // 基础信息板块
  458 + .basic_info {
  459 + // 轮播图
  460 + .swiperImage {
  461 + width: 684rpx;
  462 + height: 480rpx;
  463 + text-align: center;
  464 + image {
  465 + max-width: 100%;
  466 + max-height: 100%;
  467 + border-radius: 16rpx;
  468 + }
  469 + }
  470 + // 产品价格及购买人数
  471 + .info_pay {
  472 + color: #eb5d3b;
  473 + font-size: 18px;
  474 + margin-top: 5px;
  475 + font-family: "PingFangSC-Semibold";
  476 + display: flex;
  477 + justify-content: space-between;
  478 + .info_pay_discount {
  479 + text-decoration: line-through;
  480 + margin-left: 8rpx;
  481 + color: #999;
  482 + font-size: 14px;
  483 + }
  484 + .info_pay_number {
  485 + color: #999;
  486 + font-size: 14px;
  487 + font-family: PingFangSC-Regular;
  488 + }
  489 + }
  490 + // 产品名称
  491 + .info_name {
  492 + margin-top: 5px;
  493 + display: flex;
  494 + justify-content: space-between;
  495 + .info_name_name {
  496 + margin-right: 10px;
  497 + font-size: 16px;
  498 + font-family: "PingFangSC-Semibold";
  499 + max-width: 592rpx;
  500 + }
  501 + .info_name_share {
  502 + display: flex;
  503 + flex-direction: column;
  504 + justify-content: space-between;
  505 + align-items: center;
  506 + margin-top: 14rpx;
  507 + > image {
  508 + height: 40rpx;
  509 + width: 40rpx;
  510 + }
  511 + > text {
  512 + font-family: PingFangSC-Regular;
  513 + font-size: 12px;
  514 + color: #999;
  515 + letter-spacing: -0.23px;
  516 + }
  517 + }
  518 + }
  519 + // 售后服务
  520 + .info_after {
  521 + font-size: 10px;
  522 + color: #999;
  523 + margin-top: 20rpx;
  524 + > span {
  525 + height: 14px;
  526 + margin-right: 10px;
  527 + }
  528 + }
  529 + }
  530 + // 详细信息
  531 + .detail_info {
  532 + margin-bottom: 20rpx;
  533 + .screen_bar {
  534 + width: 670rpx;
  535 + margin-top: 20rpx;
  536 + margin-bottom: 24rpx;
  537 + display: flex;
  538 + flex-direction: row;
  539 + justify-content: space-between;
  540 + align-items: center;
  541 + font-size: 14px;
  542 + color: #333333;
  543 + transition: all 0.2s;
  544 + }
  545 + .item_active {
  546 + border-bottom: 4rpx solid #ff6b4a;
  547 + }
  548 + .screen_item {
  549 + font-size: 32rpx;
  550 + color: #333333;
  551 + display: flex;
  552 + transition: all 0.2s;
  553 + // 规格参数
  554 + .specification {
  555 + margin-bottom: 4px;
  556 + .spe_item {
  557 + image {
  558 + width: 50px;
  559 + height: 25px;
  560 + margin-right: 6px;
  561 + vertical-align: middle;
  562 + }
  563 + span {
  564 + margin-left: 24rpx;
  565 + }
  566 + }
  567 + }
  568 + }
  569 + //
  570 + }
  571 + // 宝贝好评率
  572 + .evaluate {
  573 + .evaluate_title {
  574 + font-size: 14px;
  575 + color: #333333;
  576 + display: flex;
  577 + justify-content: space-between;
  578 + .title_rate {
  579 + margin-left: 10rpx;
  580 + }
  581 + .evaluate_star {
  582 + width: 90px;
  583 + display: flex;
  584 + align-items: center;
  585 + justify-content: space-between;
  586 + }
  587 + view {
  588 + font-size: 14px;
  589 + color: #333333;
  590 + font-weight: bold;
  591 + }
  592 + }
  593 + .evaluate_tag {
  594 + view {
  595 + display: inline-block;
  596 + margin-right: 20rpx;
  597 + min-width: 180rpx;
  598 + margin-top: 10px;
  599 + height: 48rpx;
  600 + background: #f2f2f2;
  601 + border-radius: 2px;
  602 + font-family: PingFangSC-Regular;
  603 + font-size: 12px;
  604 + color: #666666;
  605 + letter-spacing: -0.23px;
  606 + text-align: center;
  607 + padding: 0 48rpx;
  608 + line-height: 48rpx;
  609 + }
  610 + }
  611 + }
  612 + // 商品详情
  613 + .more_info {
  614 + .more_fixed1 {
  615 + display: flex;
  616 + justify-content: space-between;
  617 + align-content: center;
  618 + margin-bottom: 12px;
  619 + view {
  620 + font-size: 14px;
  621 + color: #333333;
  622 + font-weight: bold;
  623 + font-family: "PingFangSC-Medium";
  624 + line-height: 24px;
  625 + }
  626 + image {
  627 + width: 240rpx;
  628 + height: 3px;
  629 + margin-top: 10px;
  630 + }
  631 + }
  632 + .more_all {
  633 + width: 100%;
  634 + margin-top: 30rpx;
  635 + margin-right: 30rpx;
  636 + margin-bottom: 180rpx;
  637 + font-family: "PingFangSC-Regular";
  638 + }
  639 + }
  640 + // 菜单
  641 + .menu {
  642 + position: fixed;
  643 + bottom: 0;
  644 + min-height: 74px;
  645 + width: 100%;
  646 + background: #ffffff;
  647 + padding: 20px 20px 8px 20px;
  648 + font-family: "PingFangSC-Regular";
  649 + box-sizing: border-box;
  650 + display: flex;
  651 + justify-content: space-between;
  652 + align-content: center;
  653 + margin: 0;
  654 + /* iphonex 等安全区设置，底部安全区适配 */
  655 + /* #ifndef APP-NVUE */
  656 + padding-bottom: constant(safe-area-inset-bottom);
  657 + padding-bottom: env(safe-area-inset-bottom);
  658 + .menu_1 {
  659 + width: 20%;
  660 + height: 100%;
  661 + text-align: center;
  662 + color: #989898;
  663 + .cart_icon {
  664 + position: relative;
  665 + text {
  666 + position: absolute;
  667 + color: white;
  668 + font-size: 17px;
  669 + background-color: red;
  670 + min-height: 24px;
  671 + min-width: 24px;
  672 + line-height: 24px;
  673 + right: -12%;
  674 + top: -12px;
  675 + text-align: center;
  676 + border-radius: 24px;
  677 + padding: 2px;
  678 + }
  679 + }
  680 + }
  681 + image {
  682 + width: 42%;
  683 + height: 26px;
  684 + }
  685 + .menu_image {
  686 + font-size: 12px;
  687 + text-align: center;
  688 + }
  689 + .menu_2 {
  690 + width: 74%;
  691 + height: 80rpx;
  692 + display: grid;
  693 + grid-template-columns: 50% 50%;
  694 + }
  695 + .menu_input {
  696 + display: inline-flex;
  697 + align-items: center;
  698 + justify-content: space-around;
  699 + background: #fff0ec;
  700 + font-size: 16px;
  701 + color: #ff6b4a;
  702 + border-radius: 20px 0 0 20px;
  703 + }
  704 + .menu_now {
  705 + display: inline-flex;
  706 + align-items: center;
  707 + justify-content: space-around;
  708 + background: #ff6b4a;
  709 + font-size: 16px;
  710 + color: #ffffff;
  711 + border-radius: 0 20px 20px 0;
  712 + }
  713 + }
  714 + /* #endif */
  715 +
  716 +}
  717 +</style>
... ...
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @7614465
... ... @@ -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 @7614465
... ... @@ -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">
... ... @@ -291,12 +275,18 @@
291 275 class="D5"
292 276 v-if="current !==2"
293 277 >
294   - <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
  278 + <view
  279 + class="D5_fixed1"
  280 + @click="consolg(goodInfo.prodIntro1)"
  281 + >
295 282 <image src="/static/img/detail/hr.png"></image>
296 283 <view>商品详细</view>
297 284 <image src="/static/img/detail/hr.png"></image>
298 285 </view>
299   - <view class="D5_all" v-html="test">
  286 + <view
  287 + class="D5_all"
  288 + v-html="test"
  289 + >
300 290 <!-- <block>
301 291 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 292 </block> -->
... ... @@ -309,7 +299,7 @@
309 299 class="botton_1"
310 300 >
311 301 <view class="cart_icon">
312   - <image v-bind:src="imgShop.img"/>
  302 + <image v-bind:src="imgShop.img" />
313 303 <text>{{cartNumber}}</text>
314 304 </view>
315 305 <view class="botton_image">购物车</view>
... ... @@ -317,32 +307,41 @@
317 307 <view class="botton_2">
318 308 <view
319 309 class="botton_input"
320   - @tap="addCart()"
  310 + @tap="showBottom(1)"
321 311 >加入购物车</view>
322 312 <view
323 313 class="botton_now"
324   - @tap="goPerchase()"
  314 +
  315 + @click="showBottom(2)"
325 316 >立即购买</view>
326 317 </view>
327 318 </view>
  319 + <BottomSheet
  320 + v-if="isShowBottom"
  321 + :isCart="isCart"
  322 + @addCart="addCart"
  323 + :pid="pid"
  324 + :goodInfo="goodInfo"
  325 + :isShowBottom="isShowBottom"
  326 + @closeBottom="closeBottom"
  327 + ></BottomSheet>
328 328 </view>
329 329 </template>
330 330  
331 331 <script>
332   -import store from '@/store'
333   -export default {
  332 +import store from '@/store'
  333 +import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
  334 +export default {
  335 + components:{
  336 + BottomSheet,
  337 + },
334 338 data () {
335   - return {
  339 + return {
  340 + isCart:Number,
  341 + isShowBottom : false, //底部弹窗开关
  342 +
336 343 test: '',
337 344 goodType: 2,
338   - pid: 0,
339   - // 购物车数据
340   - addCartList: {
341   - mp_id: 0,
342   - sk_id: 0,
343   - num: 1,
344   - price: '',
345   - },
346 345 screenItems: [
347 346 { current: 0, text: '商品介绍' },
348 347 { current: 1, text: '规格参数' },
... ... @@ -381,7 +380,20 @@ export default {
381 380 label: '眼镜盒',
382 381 value: '262',
383 382 }],
384   - },
  383 + },
  384 +
  385 + pid: Number,
  386 + // 购物车数据
  387 + addCartList: {
  388 + uid: Number,//用户的唯一识别码
  389 + openid: String,
  390 + mp_id: Number,//使用人
  391 + sk_id: Number,//产品的sku_id
  392 + num: Number,//购买数量
  393 + pid: Number,//产品id
  394 + price: Number,//价格
  395 + checkedSKU:Object//产品信息
  396 + },
385 397 }
386 398 },
387 399 onLoad: function ({ pid, sk_id: skId }) {
... ... @@ -389,7 +401,7 @@ export default {
389 401 // console.log('sk_id=====>',sk_id)
390 402 store.dispatch('read/fetch', {
391 403 pid,
392   - sk_id: skId,
  404 + // sk_id: skId,
393 405 }).then(() => {
394 406 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
395 407 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
... ... @@ -401,9 +413,10 @@ export default {
401 413 this.test = this.goodInfo.prodIntro1
402 414 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
403 415 // addCart
  416 + this.addCartList.uid = this.$store.state.user.userInfo.uid
  417 + this.addCartList.openid = this.$store.state.user.userInfo.openid
  418 + this.addCartList.pid = this.goodInfo.pid
404 419 this.addCartList.price = this.goodInfo.priceArea.Min_Price
405   - this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
406   - this.addCartList.mp_id = this.goodInfo.glassData.mp_id
407 420 })
408 421 store.dispatch('cart/getCartList')
409 422 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
... ... @@ -413,7 +426,7 @@ export default {
413 426 return this.goodType
414 427 },
415 428 goodInfo () {
416   - console.log(this.$store.state.read.goodInfo)
  429 + // console.log(this.$store.state.read.goodInfo)
417 430 return this.$store.state.read.goodInfo
418 431 },
419 432 cartNumber() {
... ... @@ -421,6 +434,14 @@ export default {
421 434 },
422 435 },
423 436 methods: {
  437 + // 底部弹窗开关
  438 + showBottom(isCart) {
  439 + this.isCart = isCart
  440 + this.isShowBottom = true
  441 + },
  442 + closeBottom() {
  443 + this.isShowBottom = false
  444 + },
424 445 // 前往购物车
425 446 toCart() {
426 447 uni.switchTab({
... ... @@ -431,20 +452,29 @@ export default {
431 452 })
432 453 },
433 454 // 加入购物车
434   - addCart () {
435   - store.dispatch('cart/addCart', {
436   - uid: this.$store.state.user.userInfo.uid,
437   - openid: this.$store.state.user.userInfo.openid,
438   - mp_id: this.addCartList.mp_id,
439   - sk_id: this.addCartList.sk_id,
440   - num: this.addCartList.num,
441   - pid: this.pid,
442   - price: this.addCartList.price,
443   - })
444   - // 再次请求购物车接口，实现实时更新
445   - store.dispatch('cart/getCartList', {
446   - uid: this.$store.state.user.userInfo.uid,
447   - })
  455 + addCart (mp_id,num,checkedSKU,sk_id) {
  456 +
  457 + this.addCartList.mp_id = mp_id
  458 + this.addCartList.sk_id = sk_id
  459 + this.addCartList.num = num
  460 + this.addCartList.checkedSKU = checkedSKU
  461 + console.log('添加购物车的参数',mp_id)
  462 + console.log('添加购物车的参数',sk_id)
  463 + console.log('添加购物车的参数',num)
  464 + console.log('添加购物车的参数',checkedSKU)
  465 + store.dispatch('cart/addCart', this.addCartList).then((res)=>{
  466 + if(res.code == 1){
  467 + uni.showToast({
  468 + title:'添加成功~',
  469 + icon:'success'
  470 + })
  471 + }
  472 + // 再次请求购物车接口，实现实时更新
  473 + store.dispatch('cart/getCartList', {
  474 + uid: this.$store.state.user.userInfo.uid,
  475 + })
  476 + })
  477 +
448 478 },
449 479 goPerchase () {
450 480 // switch (this.updateGoodType) {
... ... @@ -456,47 +486,7 @@ export default {
456 486 fail: (error) => { console.log('跳转参数选择失败======>', error) },
457 487 complete: () => { console.log('goPerchase') },
458 488 })
459   - // break
460   - // case '2':
461   - // uni.navigateTo({
462   - // url: '../detailStandard/detailStandard_k',
463   - // success: res => {},
464   - // fail: () => {},
465   - // complete: () => {}
466   - // })
467   - // break
468   - // case '3':
469   - // uni.navigateTo({
470   - // url: '../purchaseLenses/purchaseLenses',
471   - // success: res => {},
472   - // fail: () => {},
473   - // complete: () => {}
474   - // })
475   - // break
476   - // case '4':
477   - // uni.navigateTo({
478   - // url: '../detailStandard/detailStandard_sun',
479   - // success: res => {},
480   - // fail: () => {},
481   - // complete: () => {}
482   - // })
483   - // break
484   - // default :
485   - // break
486   - // }
487 489 },
488   - // 加入购物车
489   - // addCart () {
490   - // store.dispatch('cart/addCart', {
491   - // uid: this.$store.state.user.userInfo.uid,
492   - // openid: this.$store.state.user.userInfo.openid,
493   - // pid: this.pid,
494   - // checkedSKU: {},
495   - // })
496   - // store.dispatch('cart/getCartList', {
497   - // uid: this.$store.state.user.userInfo.uid, // 用户id
498   - // })
499   - // },
500 490 tabChange (e) {
501 491 if (this.current !== e) {
502 492 this.current = e
... ... @@ -690,7 +680,7 @@ export default {
690 680 color: #333333;
691 681 font-weight: bold;
692 682 }
693   - .D4_list{
  683 + .D4_list {
694 684 display: grid;
695 685 grid-row-gap: 10px;
696 686 grid-column-gap: 4px;
... ... @@ -780,7 +770,6 @@ export default {
780 770 .cart_icon {
781 771 position: relative;
782 772 image {
783   -
784 773 }
785 774 text {
786 775 position: absolute;
... ... @@ -788,19 +777,19 @@ export default {
788 777 font-size: 17px;
789 778 background-color: red;
790 779 min-height: 24px;
791   - min-width:24px;
  780 + min-width: 24px;
792 781 line-height: 24px;
793 782 right: -12%;
794 783 top: -12px;
795 784 text-align: center;
796 785 border-radius: 24px;
797   - padding:2px;
  786 + padding: 2px;
798 787 }
799 788 }
800 789 }
801 790 image {
802   - width: 60%;
803   - height: 30px;
  791 + width: 42%;
  792 + height: 26px;
804 793 }
805 794 .botton_image {
806 795 font-size: 12px;
... ... @@ -831,4 +820,10 @@ export default {
831 820 border-radius: 0 20px 20px 0;
832 821 }
833 822 }
  823 +/* 隐藏滚动条 */
  824 +::-webkit-scrollbar {
  825 + width: 0;
  826 + height: 0;
  827 + color: transparent;
  828 +}
834 829 </style>
... ...
src/pages/index/index.vue
Diff comments   View file @7614465
1 1 <template>
2   - <view class="content">
3   - <view class="header">
4   - <!-- 搜索-->
5   - <view class="searchBar">
6   - <icon
7   - class="searchIcon"
8   - type="search"
9   - size="14"
10   - ></icon>
11   - <input
12   - v-model="searchText"
13   - class="searchIpt"
14   - placeholder="老花镜"
15   - confirm-type="search"
16   - @blur="searchKey"
17   - />
18   - </view>
  2 + <view class="container">
  3 + <view
  4 + class="content skeleton"
  5 + v-show="showContent"
  6 + >
  7 + <view class="header">
  8 + <!-- 搜索-->
  9 + <view class="searchBar skeleton-rect">
  10 + <icon
  11 + class="searchIcon"
  12 + type="search"
  13 + size="14"
  14 + ></icon>
  15 + <input
  16 + v-model="searchText"
  17 + class="searchIpt"
  18 + placeholder="老花镜"
  19 + confirm-type="search"
  20 + @blur="searchKey"
  21 + />
  22 + </view>
19 23  
20   - <!-- 筛选栏-->
21   - <!-- <view class="screenBar">
  24 + <!-- 筛选栏-->
  25 + <!-- <view class="screenBar">
22 26 <view
23 27 v-for="item in screenItems"
24 28 :key="item.current"
... ... @@ -56,196 +60,249 @@
56 60 </view>
57 61 </view>
58 62 </view> -->
59   - </view>
60   - <Uni-drawer
61   - ref="showRight"
62   - mask="true"
63   - maskClick="true"
64   - mode="right"
65   - :width="320"
66   - @change="change($event,'showRight')"
67   - >
68   - <view class="close">
69   - <view @click="closeDrawer('showRight')">
70   - <text class="word-btn-white">关闭</text>
71   - </view>
72 63 </view>
73   - </Uni-drawer>
  64 + <Uni-drawer
  65 + ref="showRight"
  66 + mask="true"
  67 + maskClick="true"
  68 + mode="right"
  69 + :width="320"
  70 + @change="change($event,'showRight')"
  71 + >
  72 + <view class="close">
  73 + <view @click="closeDrawer('showRight')">
  74 + <text class="word-btn-white">关闭</text>
  75 + </view>
  76 + </view>
  77 + </Uni-drawer>
74 78  
75   - <!-- 筛选菜单-->
76   - <view class="content-wrap">
77   - <view>
78   - <HMfilterDropdown
79   - :filterData="categoryList"
80   - :defaultSelected="filterDropdownValue"
81   - :updateMenuName="true"
82   - @search="search"
83   - @getList="getList"
84   - data-format="Object"
85   - ></HMfilterDropdown>
86   - <!-- 商品列表 -->
87   - <!-- <scroll-view
  79 + <!-- 筛选菜单-->
  80 + <view class="content-wrap skeleton-rect">
  81 + <view>
  82 + <HMfilterDropdown
  83 + :filterData="categoryList"
  84 + :defaultSelected="filterDropdownValue"
  85 + :updateMenuName="true"
  86 + @search="search"
  87 + @getList="getList"
  88 + data-format="Object"
  89 + ></HMfilterDropdown>
  90 + <!-- 商品列表 -->
  91 + <!-- <scroll-view
88 92 enable-flex
89 93 @scrolltolower="handleScrolltolower"
90 94 scroll-y
91 95 style="height: 1000px;margin-bottom: 20px;"
92 96 > -->
93   - <view class="goods-list">
94   - <view class="product-list">
95   - <view
96   - class="product"
97   - v-for="(goods) in goodsList"
98   - :key="goods.id"
99   - >
100   - <Card
101   - :goods="goods"
102   - :scrollTop="scrollTop"
103   - :viewHeight="viewHeight"
104   - ></Card>
  97 + <view class="goods-list">
  98 + <view class="product-list">
  99 + <view
  100 + class="product skeleton-rect"
  101 + v-for="(goods) in goodsList"
  102 + :key="goods.id"
  103 + >
  104 + <Card
  105 + :goods="goods"
  106 + :scrollTop="scrollTop"
  107 + :viewHeight="viewHeight"
  108 + ></Card>
  109 + </view>
  110 + </view>
  111 + <view class="loading-text">
  112 + <text v-if="isLoading==true">{{loadingText}}</text>
  113 + <text v-else>{{loadedText}}</text>
105 114 </view>
106 115 </view>
107   - <view class="loading-text">
108   - <text v-if="isLoading==true">{{loadingText}}</text>
109   - <text v-else>{{loadedText}}</text>
110   - </view>
  116 + <!-- </scroll-view> -->
111 117 </view>
112   - <!-- </scroll-view> -->
113 118 </view>
114 119 </view>
  120 + <!--引用组件-->
  121 + <skeleton
  122 + :show="showSkeleton"
  123 + ref="skeleton"
  124 + loading="chiaroscuro"
  125 + selector="skeleton"
  126 + bgcolor="#FFF"
  127 + ></skeleton>
115 128 </view>
116 129 </template>
117 130  
118 131 <script>
119   -import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
120   -import Card from "@/components/CommodityCard/CommodityCard.vue";
121   -import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
122   -import store from "@/store";
  132 +import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
  133 +import Card from '@/components/CommodityCard/CommodityCard.vue'
  134 +import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
  135 +import skeleton from '@/components/quick-skeleton/quick-skeleton.vue'
  136 +import store from '@/store'
123 137  
124 138 export default {
125 139 components: {
126 140 UniDrawer: UniDrawer,
127 141 HMfilterDropdown: HMfilterDropdown,
128   - Card: Card
  142 + Card: Card,
  143 + skeleton: skeleton,
129 144 },
130 145 data() {
131 146 return {
132   - indexArr: "",
133   - valueArr: "",
134   - isLoading: true, //初始化加载状态
135   - loadingText: "data loading...",
136   - loadedText: "~~到底啦~~",
  147 + indexArr: '',
  148 + valueArr: '',
  149 + isLoading: true, // 初始化加载状态
  150 + loadingText: 'data loading...',
  151 + loadedText: '~~暂无更多数据~~',
137 152 filterDropdownValue: [],
138 153 filterData: [],
139   - searchText: "",
  154 + searchText: '',
140 155 scrollTop: 0,
141   - viewHeight: uni.getSystemInfoSync().windowHeight
142   - };
  156 + showContent: true,
  157 + viewHeight: uni.getSystemInfoSync().windowHeight,
  158 + showSkeleton: false, // 骨架屏显示隐藏
  159 + }
143 160 },
144 161 onPageScroll({ scrollTop }) {
145 162 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
146   - this.scrollTop = scrollTop;
147   - console.log("pagescroll====>", this.viewHeight);
  163 + this.scrollTop = scrollTop
148 164 },
149 165 computed: {
150 166 goodsList() {
151 167 // 也可以从 getters 获取
152 168 // console.log('index-list=====>',this.$store.state.index.list)
153   - return this.$store.state.index.list;
  169 + const list = this.$store.state.index.list
  170 + if (list.length == 0) {
  171 + this.isLoading = false
  172 + }
  173 + this.scrollTop = 0.1
  174 + return list
154 175 },
155 176 categoryList() {
156   - return this.$store.state.index.categoryList;
157   - }
  177 + return this.$store.state.index.categoryList
  178 + },
158 179 },
159 180 filters: {
160 181 outData(value) {
161   - return JSON.stringify(value);
162   - }
  182 + return JSON.stringify(value)
  183 + },
163 184 },
164   - onLoad() {
165   - store.dispatch("index/category");
166   - // this.getList();
167   - store.dispatch("index/list");
  185 + /**
  186 + * 页面载入完成后调用子组件的方法生成预加载效果
  187 + */
  188 + onReady: function() {
  189 + this.getInitData()
168 190 },
169 191 methods: {
  192 + async getInitData () {
  193 + this.showSkeleton = true
  194 + await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')])
  195 + this.showSkeleton = false
  196 + this.showContent = true
  197 + },
170 198 showDrawer(e) {
171   - this.$refs[e].open();
  199 + this.$refs[e].open()
  200 + },
  201 + // 朋友圈设置页面
  202 + onShareAppMessage() {
  203 + let myName = this.$store.state.user.userInfo.nickName
  204 + if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
  205 + myName = '【神秘人】'
  206 + } else {
  207 + myName = '【' + myName + '】'
  208 + }
  209 + return {
  210 + title: 'Hi，' + myName + '送你300元来试戴最新潮流眼镜！', // 默认是小程序的名称(可以写slogan等)
  211 + path: '/pages/index/index',
  212 + // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  213 + success: function (res) {
  214 + if (res.errMsg === 'shareAppMessage:ok') {
  215 + console.log('分享成功！', res)
  216 + }
  217 + },
  218 + fail: function (res) {
  219 + if (res.errMsg === 'shareAppMessage:fail cancel') {
  220 + console.log('fail', '放弃分享')
  221 + } else if (res.errMsg === 'shareAppMessage:fail') {
  222 + console.log('fail', '分享失败')
  223 + }
  224 + },
  225 + }
172 226 },
173 227 getList() {
174   - store.dispatch("index/list");
175   - this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
176   - //把data里的isLoading 改为false就可以了
  228 + store.dispatch('index/list')
  229 + this.isLoading = false // TODO:::这里不知道怎么改，请同学帮忙写一下。
  230 + // 把data里的isLoading 改为false就可以了
177 231 },
178 232 // search(params) {
179 233 // this.$store.index.
180 234 // },
181 235 closeDrawer(e) {
182   - this.$refs[e].close();
  236 + this.$refs[e].close()
183 237 },
184 238 change(e, type) {
185   - this[type] = e;
  239 + this[type] = e
186 240 },
187 241 onClickItem(e) {
188 242 if (this.current !== e) {
189   - this.current = e;
  243 + this.current = e
190 244 }
191 245 },
192 246 dropDown() {
193   - console.log("下拉");
  247 + console.log('下拉')
194 248 },
195 249 searchKey(e) {
196   - const { value: keyword } = e.detail;
197   - this.keyWords = keyword;
198   - store.dispatch("index/search", {
  250 + const { value: keyword } = e.detail
  251 + this.keyWords = keyword
  252 + store.dispatch('index/search', {
199 253 params: {},
200   - keyword
201   - });
  254 + keyword,
  255 + })
202 256 },
203 257 // 接收菜单结果
204 258 search(e) {
205   - const { on, value, selectedData } = e;
206   - let params = {};
207   - const selectedPayload = {};
  259 + const { on, value, selectedData } = e
  260 + let params = {}
  261 + const selectedPayload = {}
208 262 for (const key in selectedData) {
209 263 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
210   - selectedPayload[key] = selectedData[key].toString();
  264 + selectedPayload[key] = selectedData[key].toString()
211 265 }
212 266 }
213 267 if (on[0] === 1) {
214 268 // 若点击全部
215   - this.searchText = "";
216   - store.dispatch("index/list");
  269 + this.searchText = ''
  270 + store.dispatch('index/list')
217 271 } else {
218 272 for (let i = 1; i <= on.length; i++) {
219 273 // on[0]是全部
220 274 if (on[i] === 1) {
221 275 // 若该选项被选中
222   - if (this.categoryList[i].value === "filter") {
  276 + if (this.categoryList[i].value === 'filter') {
223 277 params = {
224 278 ...selectedPayload,
225   - ...params
226   - };
  279 + ...params,
  280 + }
  281 + } else if (this.categoryList[i].value === 'px') {
  282 + params.orderby = value[i][0]
227 283 } else {
228   - params[`${this.categoryList[i].value}`] = value[i][0];
  284 + params[`${this.categoryList[i].value}`] = value[i][0]
229 285 }
230 286 }
231 287 }
232   - store.dispatch("index/search", {
  288 + store.dispatch('index/search', {
233 289 params,
234   - keyword: this.keyWords
235   - });
  290 + keyword: this.keyWords,
  291 + })
236 292 }
237   - }
238   - }
239   -};
  293 + },
  294 + },
  295 +}
240 296 </script>
241 297  
242 298 <style lang="scss">
243   -.content {
  299 +.content,
  300 +.container {
244 301 display: flex;
245 302 flex-direction: column;
246 303 align-items: center;
247 304 justify-content: center;
248   - background-color: #f7f6f6;
  305 + width: 100%;
249 306 }
250 307 .header {
251 308 display: flex;
... ... @@ -325,6 +382,7 @@ export default {
325 382 flex-wrap: wrap;
326 383 .product {
327 384 width: 48%;
  385 + min-height: 120rpx;
328 386 margin: 0 0 20rpx 0;
329 387 background: #ffffff;
330 388 border: 1px solid #f2f2f2;
... ...
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @7614465
... ... @@ -3,7 +3,7 @@
3 3 <view
4 4 class="card"
5 5 v-if="current == status"
6   - @click="toOrderInfo(status,order.pay_id)"
  6 +
7 7 >
8 8 <view class="cardHeader">
9 9 <text
... ... @@ -30,7 +30,8 @@
30 30 </view>
31 31 <view
32 32 class="orderCardInfo"
33   - v-for="(orderInfo, index) in order.order_info.list"
  33 + @click="toOrderInfo(status,order.pay_id)"
  34 + v-for="(orderInfo, index) in orderInfoList"
34 35 :key="index"
35 36 >
36 37 <image
... ... @@ -52,8 +53,8 @@
52 53 class="btns"
53 54 v-if="status == '0'"
54 55 >
55   - <view class="btn-type1">取消订单</view>
56   - <view class="btn-type2">去支付</view>
  56 + <view class="btn-type1" @click="cancleOrder">取消订单</view>
  57 + <view class="btn-type2" @click="paylog">去支付</view>
57 58 </view>
58 59 <view
59 60 class="btns"
... ... @@ -65,250 +66,275 @@
65 66 class="btns"
66 67 v-if="status == '2'"
67 68 >
68   - <view class="btn-type2">再次购买</view>
  69 + <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
69 70 </view>
70 71 <!-- <view class="btns" v-if="status == '3'">
71 72 <view class="btn-type2">再次购买</view>
72 73 </view> -->
73   - </view>
74   - <view
75   - class="card"
76   - v-if="current == '10'"
77   - @click="toOrderInfo(status,order.pay_id)"
78   - >
79   - <view class="cardHeader">
80   - <text
81   - class="orderId"
82   - v-if="status == '0'||status == '1'"
83   - >订单号：{{order.pay_id}}</text>
84   - <text
85   - class="orderId"
86   - v-if="status == '2'||status == '3'"
87   - >下单时间：{{order.pay_time}}</text>
88   - <text
89   - class="orderType"
90   - v-if="status=='0'"
91   - >待付款</text>
92   - <text
93   - class="orderType"
94   - v-if="status=='1'"
95   - >待收货</text>
96   - <text
97   - class="orderType"
98   - v-if="status == '2'||status == '3'"
99   - >已完成</text>
100   - <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
101   - </view>
102   - <view
103   - class="orderCardInfo"
104   - v-if
105   - v-for="(orderInfo) in order.order_info.list"
106   - :key="orderInfo"
107   - >
108   - <image
109   - :src="orderInfo.imgUrl"
110   - mode="aspectFit"
111   - ></image>
112   - <view class="infoText">
113   - <view class="orderName">{{orderInfo.p_name}}</view>
114   - <view class="orderDescrib">{{orderInfo.p_name}}</view>
115   - <view class="infoText-bottom">
116   - <view class="markPrice">{{orderInfo.nowPrice}}</view>
117   - <view class="buy-num">X {{orderInfo.num}}</view>
118   - </view>
119   - </view>
120   - </view>
121   - <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
122   - <view
123   - class="btns"
124   - v-if="status == '0'"
125   - >
126   - <view class="btn-type1">取消订单</view>
127   - <view class="btn-type2">去支付</view>
128   - </view>
129   - <view
130   - class="btns"
131   - v-if="status == '1'"
132   - >
133   - <view class="btn-type2">确认收货</view>
134   - </view>
135   - <view
136   - class="btns"
137   - v-if="status == '2'"
138   - >
139   - <view class="btn-type2">再次购买</view>
140   - </view>
141   - <!-- <view class="btns" v-if="status == '3'">
142   - <view class="btn-type2">再次购买</view>
143   - </view> -->
  74 + </view>
  75 + <view class="card" v-if="current == '10'" >
  76 + <view class="cardHeader">
  77 + <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.pay_id}}</text>
  78 + <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text>
  79 + <text class="orderType" v-if="status=='0'">待付款</text>
  80 + <text class="orderType" v-if="status=='1'">待收货</text>
  81 + <text class="orderType" v-if="status == '2'||status == '3'">已完成</text>
  82 + <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
  83 + </view>
  84 + <view class="orderCardInfo" @click="toOrderInfo(status,order.pay_id)" v-for="(orderInfo) in orderInfoList" :key="orderInfo">
  85 + <image :src="orderInfo.imgUrl" mode="aspectFill"></image>
  86 + <view class="infoText">
  87 + <view class="orderName">{{orderInfo.p_name}}</view>
  88 + <view class="orderDescrib">{{orderInfo.p_name}}</view>
  89 + <view class="infoText-bottom">
  90 + <view class="markPrice">{{orderInfo.nowPrice}}</view>
  91 + <view class="buy-num">X {{orderInfo.num}}</view>
  92 + </view>
  93 + </view>
  94 + </view>
  95 + <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
  96 + <view class="btns" v-if="status == '0'">
  97 + <view class="btn-type1" @click="cancleOrder">取消订单</view>
  98 + <view class="btn-type2" @click="paylog">去支付</view>
  99 + </view>
  100 + <view class="btns" v-if="status == '1'">
  101 + <view class="btn-type2">确认收货</view>
  102 + </view>
  103 + <view class="btns" v-if="status == '2'||status == '3'">
  104 + <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
  105 + </view>
144 106 </view>
145 107 </view>
146 108 </template>
147 109  
148 110 <script>
149   -export default {
150   - props: {
151   - /**
152   - * 订单数据
153   - */
154   - order: {
155   - // orderId: Number,
156   - // img: String,
157   - // name: String,
158   - // originCost:String,
159   - // price: String,
160   - // orderType:Number,
161   - // buyNum:Number,
162   - finished_time: null,
163   - is_refound: String,
164   - mch_id: String,
165   - money_of_dcw: String,
166   - money_of_partner: String,
167   - money_of_shop: String,
168   - orderJudge: Boolean,
169   - order_info: {
170   - address: {
171   - cityName: String,
172   - countyName: String,
173   - detailInfo: String,
174   - errMsg: String,
175   - nationalCode: String,
176   - postalCode: String,
177   - provinceName: String,
178   - telNumber: String,
179   - userName: String
180   - },
181   - cartinfo: ["127"],
182   - keyname: "330_1588911391",
183   - lefttime: Number,
184   - list: [
185   - {
186   - cart_id: "127",
187   - imgUrl: String,
188   - img_index_url: null,
189   - memo: String,
190   - mp_id: String,
191   - nowPrice: String,
192   - num: String,
193   - oldPrice: Number,
194   - p_discount: String,
195   - p_name: String,
196   - p_root_index: String,
197   - p_sale_price: String,
198   - peopleName: String,
199   - pics: [
200   - "79_0_D122D2.jpg",
201   - "79_1_E0A1ED.jpg",
202   - "79_2_B00B3D.jpg",
203   - "79_3_B2CF21.jpg",
204   - "79_4_33AD1B.jpg"
205   - ],
206   - pid: String,
207   - sk_id: String
208   - }
209   - ],
210   - orderDesc: String,
211   - total_fee: Number
212   - },
213   - partner_uid: String,
214   - pay_cate: String,
215   - pay_id: String,
216   - pay_time: String,
217   - pay_wood_desc: String,
218   - pay_wood_id: String,
219   - prepay_id: String,
220   - re_check_staus: String,
221   - shopid: String,
222   - split_userid: String,
223   - status: String,
224   - // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
225   - total_fee: String,
226   - uid: String
227   - },
228   - /**
229   - * 当前选择
230   - */
231   - current: Number
232   - },
233   - created() {
234   - console.log("this.order", this.order);
235   - // console.log(this.order.status );
236   - // console.log(this.current);
237   - },
238   - computed: {
239   - status() {
240   - return this.order.status;
241   - },
242   - orderInfoList() {
243   - console.log("this.order.order_info[0]", this.order);
244   - return this.order.order_info;
245   - }
246   - },
247   - data() {
248   - return {};
249   - },
250   - methods: {
251   - toRefundment() {
252   - uni.navigateTo({
253   - url: "../refundment/refundment",
254   - success: res => {},
255   - fail: () => {},
256   - complete: () => {}
257   - });
258   - },
259   - toOrderInfo(status, payId) {
260   - console.log(status, payId);
261   - switch (status) {
262   - // 0待付款 1待收货 2已收货 3 已评价
263   - case "0":
264   - uni.navigateTo({
265   - url:
266   - `../myOrderPaying/myOrderPaying?status=` +
267   - status +
268   - `&payId=` +
269   - payId,
270   - fail(errMsg) {
271   - console.log(errMsg);
272   - }
273   - });
274   - break;
275   - case "1":
276   - uni.navigateTo({
277   - url:
278   - `../myOrderPaying/myOrderPaying?status=` +
279   - status +
280   - `&payId=` +
281   - payId,
282   - fail(errMsg) {
283   - console.log(errMsg);
284   - }
285   - });
  111 + import MD5Util from '../../../utils/md5'
  112 + import store from "@/store";
  113 + export default {
  114 + data() {
  115 + return {
  116 +
  117 + };
  118 + },
  119 + props: {
  120 + /**
  121 + * 订单数据
  122 + */
  123 + order: {},
  124 + /**
  125 + * 当前选择
  126 + */
  127 + current:Number
  128 +
  129 + },
  130 + created() {
  131 + console.log('order',this.order);
  132 + // console.log(this.order.status );
  133 + // console.log(this.current);
  134 + },
  135 + computed:{
  136 + status(){
  137 + return this.order.status
  138 + },
  139 + orderInfoList(){
  140 + return this.order.order_info
  141 + }
  142 + },
  143 + methods:{
  144 + async paylog() {
  145 + const openid = uni.getStorageSync('openid')
  146 + const uid = this.order.uid;
  147 + //先拿订单详情
  148 + await store.dispatch('orderRead/getOrderInfo', {
  149 + pay_id: this.order.pay_id,
  150 + uid: uid,
  151 + openid: openid
  152 + }).then((res)=>{
  153 + // console.log(res)
  154 + const { data, exKeyName: keyName } = res.order_info
  155 + const timeStamp = new Date().getTime().toString()
  156 + const total_fee = res.total_fee
  157 + const payId = res.pay_id
  158 + const nonceStr = 'asfafasfasfasfasf'
  159 + // 支付参数
  160 + const fieldSet = {
  161 + openid: openid,
  162 + uid: uid,
  163 + shopid: 0,
  164 + payCate: 2020,
  165 + payMoney: total_fee,
  166 + payWoodId: `fcdj-${uid}-${keyName}`,
  167 + payWoodDesc: '在【非常戴镜】的微信付款凭证',
  168 + nonceStr,
  169 + signType: 'MD5',
  170 + app_uid: 2020,
  171 + timeStamp,
  172 + keyname: keyName,
  173 + billInfo: JSON.stringify(data),
  174 + }
  175 + // 请求后台支付接口
  176 + store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
  177 + if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
  178 + const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
  179 + const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
  180 +
  181 + // 微信支付接口
  182 + uni.requestPayment({
  183 + appId: data.appid,
  184 + timeStamp,
  185 + nonceStr,
  186 + total_fee: total_fee,
  187 + package: `prepay_id=${data.prepay_id}`,
  188 + signType: 'MD5',
  189 + paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
  190 + success: (res) => {
  191 + // 支付成功
  192 + uni.showModal({
  193 + content: '支付成功',
  194 + showCancel: false,
  195 + })
  196 + // //修改订单状态 待付款==>待收货
  197 + // store.dispatch("statusConfirm/confirm", {
  198 + // uid: this.uid,
  199 + // openid: this.openid,
  200 + // oldway: "0",
  201 + // way: "1",
  202 + // pay_id: payId,
  203 + // judgeContent: "",
  204 + // orderInfo: this.orderInfo.order_info
  205 + // })
  206 + },
  207 + fail: (res) => {
  208 + // 支付失败
  209 + uni.showModal({
  210 + content: '支付失败',
  211 + showCancel: false,
  212 + })
  213 + },
  214 + complete: () => {
  215 + uni.hideLoading()
  216 + },
  217 + })
  218 + } else {
  219 + uni.showModal({
  220 + content: '支付失败',
  221 + showCancel: false,
  222 + })
  223 + console.log('支付失败')
  224 + uni.hideLoading()
  225 + }
  226 + })
  227 + //修改订单状态 待付款==>待收货
  228 + // store.dispatch("statusConfirm/confirm", {
  229 + // uid: this.uid,
  230 + // openid: this.openid,
  231 + // oldway: "0",
  232 + // way: "1",
  233 + // pay_id: this.payId,
  234 + // judgeContent: "",
  235 + // orderInfo: this.orderInfo.order_info
  236 + // })
  237 + })
  238 + },
  239 +
  240 + async cancleOrder(e) {
  241 + const openid = uni.getStorageSync('openid')
  242 + const uid = this.order.uid;
  243 + //先从订单详情中拿到keyname
  244 + await store.dispatch('orderRead/getOrderInfo', {
  245 + pay_id: this.order.pay_id,
  246 + uid: uid,
  247 + openid: openid
  248 + }).then((res)=>{
  249 + const keyname = res.order_info.keyname
  250 + uni.showModal({
  251 + title: "提示",
  252 + content: "现在取消，订单不可恢复哦，确认取消吗？",
  253 + success: function(res) {
  254 + if (res.confirm) {
  255 + store.dispatch("cancelOrder/cancel", {
  256 + keyname: keyname,
  257 + uid: uid,
  258 + openid: openid
  259 + }).then((res)=>{
  260 + console.log(res)
  261 + if(res.code == 1){
  262 + store.dispatch("myOrder/getList", {
  263 + way: ""
  264 + });
  265 + }else{
  266 + uni.showToast({
  267 + title:'取消失败，服务器错误!',
  268 + icon:'none'
  269 + })
  270 + }
  271 + });
  272 + } else if (res.cancel) {
  273 + console.log("用户点击取消");
  274 + }
  275 + }
  276 + });
  277 + });
  278 +
  279 + },
  280 + toDetail(pid){
  281 + console.log('pid',pid)
  282 + uni.navigateTo({
  283 + url: '../details/details?pid='+pid,
  284 + fail: (res) => {console.log(res)},
  285 + });
  286 + },
  287 + toRefundment(){
  288 + uni.navigateTo({
  289 + url: '../refundment/refundment',
  290 + success: res => {},
  291 + fail: () => {},
  292 + complete: () => {}
  293 + });
  294 + },
  295 + toOrderInfo(status,payId){
  296 + console.log(status,payId)
  297 + switch(status){
  298 + // 0待付款 1待收货 2已收货 3 已评价
  299 + case '0':
  300 + uni.navigateTo({
  301 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  302 + fail(errMsg) {
  303 + console.log(errMsg)
  304 + }
  305 + })
  306 + break;
  307 + case '1':
  308 + uni.navigateTo({
  309 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  310 + fail(errMsg) {
  311 + console.log(errMsg)
  312 + }
  313 + })
  314 +
  315 + break;
  316 + case '2' || '3':
  317 + uni.navigateTo({
  318 + url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
  319 + fail(errMsg) {
  320 + console.log(errMsg)
  321 + }
  322 + })
  323 + break;
  324 + default:
  325 + break;
  326 +
  327 + }
  328 + }
  329 + }
  330 + }
286 331  
287   - break;
288   - case "2 || 3":
289   - uni.navigateTo({
290   - url:
291   - `../myOrderPaying/myOrderPaying?status=` +
292   - status +
293   - `&payId=` +
294   - payId,
295   - fail(errMsg) {
296   - console.log(errMsg);
297   - }
298   - });
299   - break;
300   - default:
301   - break;
302   - }
303   - }
304   - }
305   -};
306 332 </script>
307 333  
308 334 <style lang="scss">
309 335 .card {
310 336 width: 670rpx;
311   - height: 478rpx;
  337 + // height: 478rpx;
312 338 background: #ffffff;
313 339 box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
314 340 border-radius: 8px;
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @7614465
... ... @@ -27,6 +27,7 @@
27 27 <OrderCard
28 28 :order="order"
29 29 :current="current"
  30 + v-if="order.order_info !== null"
30 31 ></OrderCard>
31 32 </view>
32 33 </view>
... ... @@ -48,7 +49,7 @@ export default {
48 49 { current: "10", text: "全部" },
49 50 { current: "0", text: "待付款" },
50 51 { current: "1", text: "待收货" },
51   - { current: "2", text: "待评价" }
  52 + { current: "2", text: "已完成" }
52 53 // {current:"3",text:'已评价'},
53 54 // {current:"4",text:'退款'},
54 55 ],
... ... @@ -57,24 +58,28 @@ export default {
57 58 };
58 59 },
59 60  
  61 +onShow() {
  62 + store.dispatch("myOrder/getList", {
  63 + way: ""
  64 + });
  65 +},
60 66 onLoad: function(option) {
61 67 // 获取订单列表
62   - store.dispatch("myOrder/getList", {
63   - way: ""
64   - });
  68 + // store.dispatch("myOrder/getList", {
  69 + // way: ""
  70 + // });
65 71 // 从user过来传的status，给current，以显示对应item
66 72 this.current = option.status;
67 73 },
68 74 computed: {
69 75 orderList() {
70   - // console.log('orderList', this.$store.state.myOrder.orderList);
  76 + console.log('orderList', this.$store.state.myOrder.orderList);
71 77 return this.$store.state.myOrder.orderList;
72 78 }
73 79 },
74 80 methods: {
75 81 // tab点击事件
76 82 onClickItem(e) {
77   - console.log("onClickItem", e);
78 83 if (this.current !== e) {
79 84 this.current = e;
80 85 }
... ...
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @7614465
1 1 <!-- 订单待付款 待收货 -->
2 2 <template>
3   - <view class="content">
4   - <!-- 待付款 -->
5   - <view
6   - class="order-time"
7   - v-if="status == '0'"
8   - >
9   - <text>请在</text>
10   - <uni-countdown
11   - color="#EC5D3B"
12   - splitor-color="#EC5D3B"
13   - :show-day="false"
14   - :hour="0"
15   - :second="getTime"
16   - @timeup=timeup
17   - ></uni-countdown>
18   - <text>内完成付款</text>
19   - </view>
20   - <!-- 待收货 -->
21   - <view
22   - class="headerBanner"
23   - v-if="status == '1'"
24   - >
  3 + <view class="content">
  4 + <view
  5 + class="headerBanner"
  6 + v-if="status == '2'||'3'"
  7 + >
  8 + <view class="bannerLeft">
  9 + <view class="T1">订单已完成</view>
  10 + </view>
  11 + <image
  12 + src="../../static/car.png"
  13 + mode="aspectFill"
  14 + ></image>
  15 + </view>
  16 + <!-- 待付款 -->
  17 + <view class="order-time" v-if="status == '0'" >
  18 + <text>请在</text>
  19 + <uni-countdown
  20 + color="#EC5D3B"
  21 + splitor-color="#EC5D3B"
  22 + :show-day="false"
  23 + :hour="0"
  24 + :second="getLeftTime"
  25 + @timeup="timeup" >
  26 + </uni-countdown>
  27 +
  28 + <text>内完成付款</text>
  29 + </view>
  30 +
  31 + <view class="headerBanner" v-if="status == '1'">
25 32 <view class="bannerLeft">
26 33 <view class="T1">卖家已发货</view>
27   - <view class="T2">还剩 确认收货</view>
  34 + <!-- <view class="T2">还剩 确认收货</view> -->
28 35 </view>
29 36 <image
30 37 src="../../static/car.png"
31 38 mode="aspectFill"
32 39 ></image>
33   - </view>
  40 + </view>
  41 +
  42 +
34 43 <view class="order">
35 44 <view class="order-user">
36 45 <view class="order-user-head">
... ... @@ -80,13 +89,14 @@
80 89 </text>
81 90 <text class="order-info-price">
82 91 <text class="p1">实付</text>
83   - <text class="p2">￥{{orderInfo.total_fee}}</text>
  92 + <text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
  93 +
84 94 </text>
85 95 <text class="order-info-num">
86 96 <text>订单号：{{payId}}</text>
87 97 </text>
88 98 <text class="order-info-time">
89   - <text>下单时间：{{orderInfo.pay_time | timerChange}}</text>
  99 + <text>下单时间：{{orderInfo.order_info?orderInfo.order_info.pay_time:'' | timerChange}}</text>
90 100 </text>
91 101 <view class="order-info-hr"></view>
92 102 <view class="order-info-contact">
... ... @@ -118,17 +128,28 @@
118 128 class="b2"
119 129 @click="confirmOrder"
120 130 >确认收货</button>
121   - </view>
  131 + </view>
  132 + <view
  133 + class="order-confim"
  134 + v-if="status == '2'"
  135 + >
  136 + <button
  137 + class="b2"
  138 + @click="toDetail"
  139 + >再次购买</button>
  140 + </view>
  141 +
122 142 </view>
123 143 </template>
124 144  
125 145 <script>
126   -import store from "@/store";
  146 +import store from "@/store";
  147 +import MD5Util from '../../utils/md5'
127 148 import UniCountdown from "../../components/UniCountdown/UniCountdown.vue";
128 149 export default {
129 150 components: {
130 151 UniCountdown
131   - },
  152 + },
132 153 data() {
133 154 return {
134 155 payId: "",
... ... @@ -137,24 +158,28 @@ export default {
137 158 uid: "",
138 159 openid: "",
139 160 lefttime: 0,
140   - isPay: 0
  161 + isPay: 0,
  162 + orderInfo:{},
  163 + totalPrice:0,
141 164 };
142 165 },
143   - onLoad: function(option) {
144   - console.log(option);
145   - this.payId = option.payId;
146   - this.status = option.status;
147   - this.isPay = option.isPay;
148   - const openid = uni.getStorageSync("openid");
149   - const uid = this.$store.state.user.uid;
150   - this.uid = uid;
151   - this.openid = openid;
152   - store.dispatch("orderRead/getOrderInfo", {
  166 + onLoad:async function ({payId,status,isPay}) {
  167 + this.payId = payId
  168 + this.status = status
  169 + this.isPay = isPay
  170 + // console.log('++++++++++++++++++',this.status)
  171 + const openid = uni.getStorageSync('openid')
  172 + const uid = this.$store.state.user.userInfo.uid
  173 + this.uid = uid
  174 + this.openid = openid
  175 + await store.dispatch('orderRead/getOrderInfo', {
153 176 pay_id: this.payId,
154   - uid: "1",
  177 + uid: uid,
155 178 openid: openid
156   - });
157   - // this.orderInfo = this.$store.state.orderRead.orderInfo
  179 + });
  180 + // console.log(this.$store.state.orderRead.orderInfo)
  181 + this.orderInfo = this.$store.state.orderRead.orderInfo
  182 + this.totalPrice = this.orderInfo.total_fee
158 183 },
159 184 // 若从支付页面跳转过来，返回直接返回到首页
160 185 onBackPress(option) {
... ... @@ -166,22 +191,16 @@ export default {
166 191 }
167 192 },
168 193 computed: {
169   - // 获取订单详细信息
170   - orderInfo() {
171   - console.log("orderInfo", this.$store.state.orderRead.orderInfo);
172   - return this.$store.state.orderRead.orderInfo || {};
173   - },
174   - orderInfoList() {
175   - const orderInfoList = this.orderInfo.order_info.list;
176   - return orderInfoList;
  194 + orderInfoList () {
  195 + return this.orderInfo.order_info?this.orderInfo.order_info.list:null
177 196 },
178 197 // 获取订单地址信息
179   - orderAddressInfo() {
180   - return this.orderInfo.order_info.address;
  198 + orderAddressInfo () {
  199 + return this.orderInfo.order_info?this.orderInfo.order_info.address:null
181 200 },
182 201 // 订单付款时间
183   - getTime() {
184   - return this.orderInfo.order_info.lefttime;
  202 + getLeftTime () {
  203 + return this.orderInfo.order_info?this.orderInfo.order_info.lefttime:1800
185 204 },
186 205 // 计算总优惠额
187 206 totalDiscount() {
... ... @@ -195,33 +214,139 @@ export default {
195 214 // console.log(totalDiscount)
196 215 return totalDiscount;
197 216 }
198   - },
199   - methods: {
  217 + },
  218 +
  219 + methods: {
  220 + //再次购买 暂时只支持跳转第一个商品
  221 + toDetail(){
  222 + const pid = this.orderInfo.order_info.list[0].pid
  223 + uni.navigateTo({
  224 + url: '../details/details?pid='+pid,
  225 + fail: (res) => {console.log(res)},
  226 + });
  227 + },
200 228 // 取消订单
201 229 timeup() {
202 230 this.cancleOrder();
203 231 },
204 232 cancleOrder() {
205 233 const uid = this.uid;
206   - const openid = this.openid;
  234 + const openid = this.openid;
  235 + const keyname = this.orderInfo.order_info.keyname
  236 + // console.log('keyname',this.orderInfo.keyname)
207 237 uni.showModal({
208 238 title: "提示",
209 239 content: "现在取消，订单不可恢复哦，确认取消吗？",
210 240 success: function(res) {
211 241 if (res.confirm) {
212 242 store.dispatch("cancelOrder/cancel", {
213   - keyname: "1",
  243 + keyname: keyname,
214 244 uid: uid,
215 245 openid: openid
216   - });
  246 + });
  247 + uni.navigateBack({
  248 + delta:1
  249 + })
217 250 } else if (res.cancel) {
218 251 console.log("用户点击取消");
219 252 }
220 253 }
221 254 });
222 255 },
223   - paylog() {},
224   - confirmOrder() {
  256 + paylog() {
  257 + console.log('pay',this.orderInfo)
  258 + const { data, exKeyName: keyName } = this.orderInfo
  259 + const uid = uni.getStorageSync('uid')
  260 + const timeStamp = new Date().getTime().toString()
  261 + const nonceStr = 'asfafasfasfasfasf'
  262 + // 支付参数
  263 + const fieldSet = {
  264 + openid: this.$store.state.user.userInfo.openid,
  265 + uid: this.$store.state.user.userInfo.uid,
  266 + shopid: 0,
  267 + payCate: 2020,
  268 + payMoney: this.totalPrice,
  269 + payWoodId: `fcdj-${uid}-${keyName}`,
  270 + payWoodDesc: '在【非常戴镜】的微信付款凭证',
  271 + nonceStr,
  272 + signType: 'MD5',
  273 + app_uid: 2020,
  274 + timeStamp,
  275 + keyname: keyName,
  276 + billInfo: JSON.stringify(data),
  277 + }
  278 + // 请求后台支付接口
  279 + store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
  280 + if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
  281 + const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
  282 + const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
  283 +
  284 + // 微信支付接口
  285 + uni.requestPayment({
  286 + appId: data.appid,
  287 + timeStamp,
  288 + nonceStr,
  289 + total_fee: this.totalPrice,
  290 + package: `prepay_id=${data.prepay_id}`,
  291 + signType: 'MD5',
  292 + paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
  293 + success: (res) => {
  294 + // 支付成功
  295 + uni.showModal({
  296 + content: '支付成功',
  297 + showCancel: false,
  298 + })
  299 + // 跳转订单详情页->状态 待收货
  300 + uni.reLaunch({
  301 + url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,
  302 + })
  303 + },
  304 + fail: (res) => {
  305 + // 支付失败
  306 + uni.showModal({
  307 + content: '支付失败',
  308 + showCancel: false,
  309 + })
  310 + // 跳转订单详情页->刷新本页面
  311 + // uni.redirectTo({
  312 + // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
  313 + // })
  314 + },
  315 + complete: () => {
  316 + uni.hideLoading()
  317 + },
  318 + })
  319 + } else {
  320 + uni.showModal({
  321 + content: '支付失败',
  322 + showCancel: false,
  323 + })
  324 + console.log('支付失败')
  325 + uni.hideLoading()
  326 + // uni.redirectTo({
  327 + // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,
  328 + // })
  329 + }
  330 + })
  331 +
  332 + //修改订单状态 待付款==>待收货
  333 + store.dispatch("statusConfirm/confirm", {
  334 + uid: this.uid,
  335 + openid: this.openid,
  336 + oldway: "0",
  337 + way: "1",
  338 + pay_id: this.payId,
  339 + judgeContent: "",
  340 + orderInfo: this.orderInfo.order_info
  341 + })
  342 + .then(
  343 + // setTimeout(() => {
  344 + // uni.navigateBack();
  345 + // }, 1500)
  346 + );
  347 + },
  348 + confirmOrder() {
  349 + //确认收货 way1 ==>way2
225 350 store
226 351 .dispatch("statusConfirm/confirm", {
227 352 uid: this.uid,
... ... @@ -232,11 +357,24 @@ export default {
232 357 judgeContent: "",
233 358 orderInfo: this.orderInfo.order_info
234 359 })
235   - .then(
236   - setTimeout(() => {
237   - uni.navigateBack();
238   - }, 1500)
239   - );
  360 + .then((res)=>{
  361 + if(res.data.code === 1){
  362 + uni.showToast({
  363 + title:'已确认',
  364 + mask:true,
  365 + duration:1500,
  366 + icon:'success'
  367 + })
  368 + }else{
  369 + uni-uni.showToast({
  370 + title: '服务器错误，确认失败!',
  371 + mask:true
  372 + });
  373 + }
  374 + setTimeout(() => {
  375 + uni.navigateBack();
  376 + }, 1500)
  377 + });
240 378 }
241 379 },
242 380 filters: {
... ...
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @7614465
... ... @@ -130,6 +130,21 @@
130 130 </picker>
131 131 </view>
132 132 </view>
  133 + <view class="ipts">
  134 + <view class="inputItem">
  135 + <text class="text">镜片宽度</text>
  136 + <input class="input" @input="glassInfoInput($event,0)" type="text" :value="glassInfo.glassWidth!='0'?glassInfo.glassWidth:''" placeholder="请输入镜片宽度"/>
  137 + </view>
  138 + <view class="inputItem">
  139 + <text class="text">鼻梁宽度</text>
  140 + <input class="input" @input="glassInfoInput($event,1)" type="text" :value="glassInfo.norseWidth!='0'?glassInfo.norseWidth:''" placeholder="请输入鼻梁宽度"/>
  141 + </view>
  142 + <view class="inputItem">
  143 + <text class="text">镜腿长度</text>
  144 + <input class="input" @input="glassInfoInput($event,2)" type="text" :value="glassInfo.legWidth!='0'?glassInfo.legWidth:''" placeholder="请输入镜腿长度"/>
  145 + </view>
  146 +
  147 + </view>
133 148 <view class="confirm">
134 149 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
135 150 <text>确认以上输入信息来源于我的验光数据!</text>
... ... @@ -160,7 +175,7 @@
160 175 ],
161 176 confirm: false, // 用户是否确认
162 177 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
163   - name: '夏小花',
  178 + name: '请输入W姓名',
164 179 oldname:'',// 用于判读用户是否改变名字
165 180 pickerInfoChioce:{
166 181 "leftSph": '',
... ... @@ -175,10 +190,16 @@
175 190 "day":0 ,
176 191 }
177 192 },
  193 + glassInfo:{
  194 + norseWidth:0,//鼻宽
  195 + glassWidth:0,//镜片宽度
  196 + legWidth:0//镜腿长度
  197 + },
178 198 pd: '',// 瞳距
179 199 oldpd: '',// 用于判断用户是否改变瞳距
180 200 kinds:Number, // kinds=1，提交为新增验光，2为修改
181   - mp_id: Number
  201 + mp_id: Number,
  202 + loveItem:Object
182 203 };
183 204 },
184 205 onLoad: function (option) {
... ... @@ -220,10 +241,10 @@
220 241 } else{
221 242 console.log('args===>',option.index)
222 243 const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
223   - console.log('args===>',loveList[option.index].in_time)
224   - console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
225   - console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
226   - console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
  244 + // console.log('args===>',loveList[option.index].in_time)
  245 + // console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
  246 + // console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
  247 + // console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
227 248 this.name=loveList[option.index].name
228 249 this.pd=loveList[option.index].pd
229 250 this.mp_id=loveList[option.index].mp_id
... ... @@ -248,9 +269,35 @@
248 269 } else{
249 270 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
250 271 }
  272 + this.glassInfo.glassWidth = loveList[option.index].glassWidth
  273 + this.glassInfo.norseWidth = loveList[option.index].norseWidth
  274 + this.glassInfo.legWidth = loveList[option.index].legWidth
  275 + this.loveItem = loveList[option.index]
  276 + }
  277 + },
  278 + computed:{
  279 + //判断当前眼镜信息是否有0
  280 + glassInfoRight(){
  281 + const glassInfoArr = Object.values(this.glassInfo)
  282 + return glassInfoArr.find(item => item == '0') ==undefined
251 283 }
252 284 },
253 285 methods:{
  286 + glassInfoInput(e,type){
  287 + switch(type){
  288 + case 0:
  289 + this.glassInfo.glassWidth = e.detail.value
  290 + break;
  291 + case 1:
  292 + this.glassInfo.norseWidth = e.detail.value
  293 + break;
  294 + case 2:
  295 + this.glassInfo.legWidth = e.detail.value
  296 + break;
  297 + default:
  298 + break;
  299 + }
  300 + },
254 301 handleInput(e){
255 302 this.name=e.target.value
256 303 },
... ... @@ -268,6 +315,41 @@
268 315 }
269 316  
270 317 },
  318 + updateMylove(){
  319 + const loveItem = this.loveItem
  320 + const glassWidth = this.glassInfo.glassWidth
  321 + const norseWidth = this.glassInfo.norseWidth
  322 + const legWidth = this.glassInfo.legWidth
  323 + // console.log(loveItem.glassWidth)
  324 + // console.log(glassWidth)
  325 + if(loveItem.glassWidth !== glassWidth){
  326 + store.dispatch('myLoveList/updateMylove', {
  327 + uid: this.$store.state.user.userInfo.uid,
  328 + openid: this.$store.state.user.userInfo.openid,
  329 + mp_id: this.mp_id,
  330 + keyname: 'glassWidth',
  331 + keyvalue: glassWidth
  332 + });
  333 + }
  334 + if(loveItem.norseWidth !== norseWidth){
  335 + store.dispatch('myLoveList/updateMylove', {
  336 + uid: this.$store.state.user.userInfo.uid,
  337 + openid: this.$store.state.user.userInfo.openid,
  338 + mp_id: this.mp_id,
  339 + keyname: 'norseWidth',
  340 + keyvalue: norseWidth
  341 + });
  342 + }
  343 + if(loveItem.legWidth !== legWidth){
  344 + store.dispatch('myLoveList/updateMylove', {
  345 + uid: this.$store.state.user.userInfo.uid,
  346 + openid: this.$store.state.user.userInfo.openid,
  347 + mp_id: this.mp_id,
  348 + keyname: 'legWidth',
  349 + keyvalue: legWidth
  350 + });
  351 + }
  352 + },
271 353 // 用户提交
272 354 handleSubmit(){
273 355 if(this.name==''){
... ... @@ -288,22 +370,18 @@
288 370  
289 371 if(this.kinds==1){
290 372 // 添加用户验光单
291   - console.log('kinds====>',this.pickerInfoChioce.leftSph)
292   - console.log('kinds====>',this.pickerInfoChioce.leftSph==Number)
293   - console.log('kinds====>',this.pickerInfoChioce.rightSph==Number)
294 373 if(this.pickerInfoChioce.rightSph==''||this.pickerInfoChioce.leftSph==''||
295 374 this.pickerInfoChioce.leftCyl==''||this.pickerInfoChioce.rightCyl==''||
296   - this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi==''
  375 + this.pickerInfoChioce.leftAxi==''||this.pickerInfoChioce.rightAxi=='' ||!this.glassInfoRight
297 376 ){
298 377 uni.showToast({
299   - title:"请输入您的验光数据",
  378 + title:"请完善您的数据~",
300 379 icon: "none",
301 380 duration: 2000,
302 381 })
303 382 }else{
304 383 if(this.confirm){
305 384 store.dispatch('myLoveList/addMylove', {
306   -
307 385 uid: this.$store.state.user.userInfo.uid,
308 386 openid: this.$store.state.user.userInfo.openid,
309 387 // mp_name: this.$store.state.user.userInfo.mp_name,
... ... @@ -315,17 +393,16 @@
315 393 rightAxi: this.pickerInfoChioce.rightAxi,
316 394 pd: this.pd,// 瞳距
317 395 mp_name:this.name,
  396 + glassWidth:this.glassInfo.glassWidth,
  397 + norseWidth:this.glassInfo.norseWidth,
  398 + legWidth:this.glassInfo.legWidth
318 399 // time: this.pickerInfoChioce.time,
319 400 // img_url2: "http://localhost:8087/images/shop_1/1/",
320 401 });
321   - store.dispatch('myLoveList/getLoveList', {
322   - uid: this.$store.state.user.userInfo.uid,
323   - });
324 402 uni.navigateBack({
325 403 delta:1,
326 404 animationDuration:2000
327 405 })
328   -
329 406 } else{
330 407 uni.showToast({
331 408 title:"请确认您的验光数据",
... ... @@ -333,14 +410,9 @@
333 410 duration: 3000,
334 411 })
335 412 }
336   -
337 413 }
338   -
339 414 }
340 415 if(this.kinds==2){
341   - // console.log('kinds====>',this.kinds)
342   - // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
343   - // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
344 416 if(this.confirm){
345 417 const leftList = ["leftSph","leftCyl","leftAxi"];
346 418 const rightList = ["rightSph", "rightCyl", "rightAxi"];
... ... @@ -401,16 +473,14 @@
401 473 }
402 474  
403 475 }
  476 + this.updateMylove()
  477 + flag=1
404 478 if(flag!=0){
405   - store.dispatch('myLoveList/getLoveList', {
406   - uid: this.$store.state.user.userInfo.uid,
407   - });
408 479 uni.navigateBack({
409 480 delta:1,
410 481 animationDuration:2000
411 482 })
412 483 }
413   -
414 484 } else{
415 485 uni.showToast({
416 486 title:"请确认您的验光数据",
... ... @@ -418,14 +488,9 @@
418 488 duration: 3000,
419 489 })
420 490 }
421   -
422 491 }
423   -
424   -
425 492 }
426   -
427 493 }
428   -
429 494 },
430 495 changeConfirm() {
431 496 this.confirm = !this.confirm
... ... @@ -628,6 +693,29 @@
628 693  
629 694 }
630 695 }
  696 + .ipts{
  697 + width: 100%;
  698 + display: flex;
  699 + flex-direction: column;
  700 + justify-content: center;
  701 + align-items: flex-start;
  702 + padding: 20rpx 36rpx;
  703 + box-sizing: border-box;
  704 + .inputItem{
  705 + display: flex;
  706 + flex-direction: row;
  707 + justify-content: center;
  708 + align-items: center;
  709 + margin-bottom: 36rpx;
  710 + .text{
  711 + margin-right: 100rpx;
  712 + }
  713 + .input{
  714 + border-bottom: 1px solid #CFCFCF;
  715 + }
  716 + }
  717 +
  718 + }
631 719 }
632 720  
633 721 .footer{
... ...
src/pages/test/index.vue
Diff comments   View file @7614465
... ... @@ -0,0 +1,96 @@
  1 +<template>
  2 + <view class="controller">
  3 + <view class="container skeleton">
  4 + <view class="userinfo">
  5 + <block>
  6 + <!--skeleton-radius 绘制圆形-->
  7 + <image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
  8 + <!--skeleton-rect 绘制矩形-->
  9 + <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
  10 + </block>
  11 + </view>
  12 + <view style="margin: 20px 0">
  13 + <view v-for="(item,index) in lists" :key="index" class="lists">
  14 + <text class="skeleton-rect">{{item}}</text>
  15 + </view>
  16 + </view>
  17 +
  18 + <view class="usermotto">
  19 + <text class="user-motto skeleton-rect">{{motto}}</text>
  20 + </view>
  21 + </view>
  22 + <!--引用组件-->
  23 + <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
  24 + </view>
  25 +</template>
  26 +
  27 +<script>
  28 + //引入骨架屏组件(以我本地地址为例，具体地址由自身引用位置决定)
  29 + import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
  30 + export default {
  31 + data() {
  32 + return {
  33 + motto: 'Hello World',
  34 + userInfo: {
  35 + avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/s4RzXCAQsVNliaJXtHBvdpAkeRwnK7Jhiaf9mzuVqEhZza3zSYM7tJ1xZCQE9SCoOR8qjVEjDKltw1SQnxyicWq6A/132',
  36 + nickName: 'jayzou'
  37 + },
  38 + lists: [
  39 + '第1行数据',
  40 + '第2行数据',
  41 + '第3行数据',
  42 + '第4行数据',
  43 + '第5行数据',
  44 + '第6行数据'
  45 + ],
  46 + showSkeleton: false //骨架屏显示隐藏
  47 + }
  48 + },
  49 + components: {
  50 + skeleton
  51 + },
  52 + onLoad: function () {
  53 + },
  54 + /**
  55 + * 页面载入完成后调用子组件的方法生成预加载效果
  56 + */
  57 + onReady:function(){
  58 + const that = this;
  59 + that.showSkeleton = true;
  60 +
  61 + setTimeout(() => {
  62 + that.showSkeleton = false;
  63 + }, 2000);
  64 + }
  65 + }
  66 +</script>
  67 +
  68 +<style>
  69 +.container {
  70 + padding: 20upx 60upx;
  71 +}
  72 +/**index.wxss**/
  73 +.userinfo {
  74 + display: flex;
  75 + flex-direction: column;
  76 + align-items: center;
  77 +}
  78 +.userinfo-avatar {
  79 + width: 128rpx;
  80 + height: 128rpx;
  81 + margin: 20rpx;
  82 + border-radius: 50%;
  83 +}
  84 +.userinfo-nickname {
  85 + color: #aaa;
  86 +}
  87 +.usermotto {
  88 + margin-top: 200px;
  89 +}
  90 +.lists{
  91 + margin: 10px 0;
  92 +}
  93 +.list{
  94 + margin-right: 10px;
  95 +}
  96 +</style>
0 97 \ No newline at end of file
... ...
src/pages/user/user.vue
Diff comments   View file @7614465
... ... @@ -36,16 +36,16 @@
36 36 <button @tap="chatOur(2)">客服2</button>
37 37 </view>
38 38 </uni-popup>
39   -<!-- <scroll-view
  39 + <!-- <scroll-view
40 40 enable-flex
41 41 @scrolltolower="handleScrolltolower"
42 42 scroll-y
43 43 style="height: 1000px;"
44 44 > -->
45   - <view
46   - v-if="isAuth"
47   - class="content"
48   - >
  45 + <view
  46 + v-if="isAuth"
  47 + class="content"
  48 + >
49 49 <view class="userInfo">
50 50 <view class="info">
51 51 <image
... ... @@ -77,12 +77,9 @@
77 77 ></image>
78 78 </view>
79 79 <view class="myOrder">
80   - <view class="orderHeader">
  80 + <view class="orderHeader" @click="toMyOrder('10')" >
81 81 <text>我的订单</text>
82   - <view
83   - class="btn"
84   - @click="toMyOrder('10')"
85   - >
  82 + <view class="btn">
86 83 全部
87 84 <image
88 85 src="../../static/right.png"
... ... @@ -135,13 +132,16 @@
135 132 </view>
136 133 <image src="../../static/right.png" mode="aspectFit"></image>
137 134 </view> -->
138   - <view class="item">
  135 + <view
  136 + @tap="toAddress"
  137 + class="item"
  138 + >
139 139 <image
140 140 src="../../static/address-icon.png"
141 141 mode="aspectFit"
142 142 ></image>
143 143 <view class="left">
144   - <text @tap="toAddress">地址管理</text>
  144 + <text>地址管理</text>
145 145 <image
146 146 class="image2"
147 147 src="../../static/right.png"
... ... @@ -150,26 +150,32 @@
150 150 </view>
151 151  
152 152 </view>
153   - <view class="item">
  153 + <view
  154 + @tap="introduce"
  155 + class="item"
  156 + >
154 157 <image
155 158 src="../../static/img/user/introduce.png"
156 159 mode="aspectFit"
157 160 ></image>
158 161 <view class="left">
159   - <text @tap="introduce">系统介绍</text>
  162 + <text>系统介绍</text>
160 163 <image
161 164 src="../../static/right.png"
162 165 mode="aspectFit"
163 166 ></image>
164 167 </view>
165 168 </view>
166   - <view class="item">
  169 + <view
  170 + @tap="joinUs"
  171 + class="item"
  172 + >
167 173 <image
168 174 src="../../static/img/user/joinUs.png"
169 175 mode="aspectFit"
170 176 ></image>
171 177 <view class="left">
172   - <text @tap="joinUs">加入我们</text>
  178 + <text>加入我们</text>
173 179 <image
174 180 src="../../static/right.png"
175 181 mode="aspectFit"
... ... @@ -198,26 +204,30 @@
198 204 </view>
199 205 <!-- 商品列表 -->
200 206 <view class="goods-list">
201   -<!-- <scroll-view
  207 + <!-- <scroll-view
202 208 enable-flex
203 209 @scrolltolower="handleScrolltolower"
204 210 scroll-y
205 211 class="product-list"
206 212 > -->
207   - <view class="product-list">
  213 + <view class="product-list">
208 214 <view
209 215 class="product"
210 216 v-for="(item, index) in userRecommandList"
211 217 :key="index"
212 218 >
213   - <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card>
  219 + <Card
  220 + :goods="item"
  221 + :scrollTop="scrollTop"
  222 + :viewHeight="viewHeight"
  223 + ></Card>
214 224 </view>
215   - </view>
  225 + </view>
216 226 <!-- </scroll-view> -->
217 227 <view class="loading-text">{{loadingText}}</view>
218 228 </view>
219 229 </view>
220   - </view>
  230 + </view>
221 231 <view
222 232 v-else
223 233 class="auth"
... ... @@ -232,7 +242,7 @@
232 242 @getuserinfo="onGotUserInfo"
233 243 >授权登陆</button>
234 244 </view>
235   - <!-- </scroll-view> -->
  245 + <!-- </scroll-view> -->
236 246 </view>
237 247 </template>
238 248  
... ... @@ -244,38 +254,39 @@ import UniPopup from &#39;@/components/UniPopup/uni-popup.vue&#39;
244 254 export default {
245 255 components: {
246 256 Card,
247   - UniPopup
  257 + UniPopup,
248 258 },
249 259 data() {
250 260 return {
251 261 isAuth: true, // 是否显示授权页面,
252 262 pagesnum: 1, // 分页请求初始值
253   - whichTap: 0 ,// 弹窗渲染选择条件
  263 + whichTap: 0, // 弹窗渲染选择条件
254 264 loadingText: '到底了',
255 265 scrollTop: 0,
256 266 viewHeight: uni.getSystemInfoSync().windowHeight,
257 267 }
258 268 },
259   - onPageScroll({scrollTop}) {
  269 + onPageScroll({ scrollTop }) {
260 270 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
261   - this.scrollTop = scrollTop;
  271 + this.scrollTop = scrollTop
262 272 },
263 273 onLoad() {
  274 + const that = this
264 275 // 判断是否授权
265 276 uni.getSetting({
266 277 success(res) {
267 278 console.log('authSetting', res.authSetting)
268 279 if (res.authSetting['scope.userInfo'] === true) {
269   - this.isAuth = true
  280 + that.isAuth = true
270 281 } else {
271   - this.isAuth = false
  282 + that.isAuth = false
272 283 }
273   - }
  284 + },
274 285 })
275 286 store.dispatch('userRecommand/getRecommandList', {
276   - uid: this.$store.state.user.userInfo.uid,
277   - openid: this.$store.state.user.userInfo.openid,
278   - page: this.pagesnum
  287 + uid: that.$store.state.user.userInfo.uid,
  288 + openid: that.$store.state.user.userInfo.openid,
  289 + page: that.pagesnum,
279 290 })
280 291 },
281 292 onReachBottom() {
... ... @@ -284,7 +295,7 @@ export default {
284 295 store.dispatch('userRecommand/getRecommandList', {
285 296 uid: this.$store.state.user.userInfo.uid,
286 297 openid: this.$store.state.user.userInfo.openid,
287   - page: this.pagesnum
  298 + page: this.pagesnum,
288 299 })
289 300 },
290 301 computed: {
... ... @@ -295,9 +306,9 @@ export default {
295 306 return this.$store.state.user.userInfo.headerphoto
296 307 },
297 308 userRecommandList() {
298   - console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList)
  309 + console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
299 310 return this.$store.state.userRecommand.recommandList
300   - }
  311 + },
301 312 },
302 313 methods: {
303 314 // 弹窗
... ... @@ -308,11 +319,11 @@ export default {
308 319 chatOur(item) {
309 320 if (item === 1) {
310 321 uni.makePhoneCall({
311   - phoneNumber: 13376189297 // 客服1 电话
  322 + phoneNumber: 13376189297, // 客服1 电话
312 323 })
313 324 } else {
314 325 uni.makePhoneCall({
315   - phoneNumber: 18014995101 // 客服2 电话
  326 + phoneNumber: 18014995101, // 客服2 电话
316 327 })
317 328 }
318 329 },
... ... @@ -330,19 +341,19 @@ export default {
330 341 url: '../address/addressList',
331 342 success: res => {},
332 343 fail: () => {},
333   - complete: () => {}
  344 + complete: () => {},
334 345 })
335 346 },
336 347 introduce() {
337 348 uni.showModal({
338 349 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
339   - showCancel: false
  350 + showCancel: false,
340 351 })
341 352 },
342 353 joinUs() {
343 354 uni.showModal({
344 355 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
345   - showCancel: false
  356 + showCancel: false,
346 357 })
347 358 },
348 359 toMyOrder(status) {
... ... @@ -350,15 +361,15 @@ export default {
350 361 url: `../myOrder/myOrder?status=${status}`,
351 362 success: res => {},
352 363 fail: () => {},
353   - complete: () => {}
  364 + complete: () => {},
354 365 })
355 366 },
356 367 toOpticsData() {
357 368 uni.navigateTo({
358   - url: '../addOpticsData/addOpticsData'
  369 + url: '../addOpticsData/addOpticsData',
359 370 })
360   - }
361   - }
  371 + },
  372 + },
362 373 }
363 374 </script>
364 375  
... ... @@ -376,7 +387,7 @@ export default {
376 387 background-color: #f2f2f2;
377 388 }
378 389 .userInfo {
379   - background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%);
  390 + background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
380 391 width: 100%;
381 392 height: 240rpx;
382 393 color: #ffffff;
... ... @@ -472,7 +483,7 @@ export default {
472 483 flex-direction: row;
473 484 justify-content: space-between;
474 485 align-items: center;
475   - border-bottom: 1px solid #F5F5F5;
  486 + border-bottom: 1px solid #f5f5f5;
476 487 font-weight: bold;
477 488 font-size: 18px;
478 489 color: #333333;
... ... @@ -538,7 +549,7 @@ export default {
538 549 align-items: center;
539 550 justify-content: space-between;
540 551 height: 72rpx;
541   - border-bottom: 1px solid #F2F2F2;
  552 + border-bottom: 1px solid #f2f2f2;
542 553 image {
543 554 margin-right: 0;
544 555 height: 16px;
... ... @@ -550,9 +561,9 @@ export default {
550 561 width: 40rpx;
551 562 height: 44rpx;
552 563 }
553   - .lastLeft{
554   - border-bottom: none;
555   - }
  564 + .lastLeft {
  565 + border-bottom: none;
  566 + }
556 567 }
557 568 }
558 569 .recommend {
... ...
src/static/easy-loadimage/default.jpeg
Diff comments   View file @7614465

2.14 KB
src/static/img/detail/share-icon.png
Diff comments   View file @7614465

1.54 KB
src/static/img/share/friend.png
Diff comments   View file @7614465

6.4 KB
src/static/img/share/poster.png
Diff comments   View file @7614465

6.92 KB
src/static/img/share/recommend.png
Diff comments   View file @7614465

7.38 KB
src/store/modules/cancelOrder.js
Diff comments   View file @7614465
... ... @@ -5,32 +5,21 @@ const {
5 5 cancelOrder
6 6 } = urlAlias;
7 7  
8   -const state = {
9   - orderList: [],
10   -};
11   -
12   -const mutations = {
13   - INIT: (state, data) => {
14   - state.orderList = data;
15   - },
16   -};
17   -
18 8 const actions = {
19 9 cancel({ commit }, param) {
20   - request({
21   - url: cancelOrder,
22   - data: param,
23   - success: (res) => {
24   - console.log(res.data);
25   - // commit("INIT", res.data.data);
26   - },
27   - })
  10 + return new Promise((resolve)=>
  11 + request({
  12 + url: cancelOrder,
  13 + data: param,
  14 + success: (res) => {
  15 + // console.log(res.data);
  16 + resolve(res.data)
  17 + },
  18 + }) )
28 19 }
29 20 }
30 21  
31 22 export default {
32 23 namespaced: true,
33   - state,
34   - mutations,
35 24 actions,
36 25 }
37 26 \ No newline at end of file
... ...
src/store/modules/cart.js
Diff comments   View file @7614465
... ... @@ -4,7 +4,9 @@ import request from &#39;../request&#39;
4 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5  
6 6 const state = {
7   - cartList: [],
  7 + cartList: [],
  8 + checkedCartLst:[],
  9 + buyItem:Object
8 10 }
9 11  
10 12 const mutations = {
... ... @@ -12,57 +14,46 @@ const mutations = {
12 14 state.cartList = cartList
13 15 },
14 16 DEL: (state, index) => {
15   - console.log('mutations====>', state.cartList)
16 17 state.cartList.splice(index, 1)
17   - console.log('mutations====>index', index)
18   - // state.cartList=delList
19 18 },
20 19 MODI: (state, args) => {
21   - console.log('the num', state.cartList[args.index].num)
22   - console.log('mutations====>isadd', args)
23 20 state.cartList[args.index].num = args.num
24   - console.log('the num', state.cartList[args.index].num)
25 21 },
26 22  
27 23 }
28 24  
29 25 const actions = {
30 26 // 获取购物车列表
31   - getCartList({ commit }, param) {
32   - request({
  27 + getCartList({ commit }, param) {
  28 + return new Promise((resolve) => request({
33 29 url: cartList,
34 30 data: param,
35 31 success: (res) => {
36   - console.log('cart===>接口数据', res.data.data)
37   - commit('INIT', res.data.data)
38   - },
39   - fail: (res) => {
40   - console.log('fail status === > ', res)
41   - },
42   - complete: (res) => {
43   - console.log('complete status === > ', res)
  32 + let test = {
  33 + isChecked: false,
  34 + itemNum:1,
  35 + price:0
  36 + }
  37 + commit('INIT', res.data.data)
  38 + resolve(res.data.data)
44 39 },
45   - })
  40 + }))
46 41 },
47 42 // 修改购物车数量
48 43 modiCart({ commit }, param) {
49 44 const arg = Object.assign({ num: param.num }, param.args)
50 45 delete param.args
51   - request({
  46 + return new Promise((resolve) => request({
52 47 url: cartModi,
53 48 data: param,
54 49 success: (res) => {
55   - console.log('modiCart-res=====>', res.data)
56   - console.log('modi-parm', param)
57 50 commit('MODI', arg)
58 51 },
59 52 fail: (res) => {
60   - console.log('fail status === > ', res)
61 53 },
62 54 complete: (res) => {
63   - console.log('complete status === > ', res)
64 55 },
65   - })
  56 + }))
66 57 },
67 58 // 删除购物车商品
68 59 delCart({ commit }, param) {
... ... @@ -72,36 +63,33 @@ const actions = {
72 63 url: cartDel,
73 64 data: param,
74 65 success: (res) => {
75   - console.log('del-parm', param)
76   - console.log('del-myparms==>', arg)
77 66 commit('DEL', arg)
78 67 },
79 68 fail: (res) => {
80   - console.log('fail status === > ', res)
81 69 },
82 70 complete: (res) => {
83   - console.log('complete status === > ', res)
84 71 },
85 72 })
86 73 },
87 74 // 添加到购物车
88 75 addCart({ commit }, param) {
89 76 console.log('请求接口开始')
90   - request({
  77 + return new Promise((resolve) => request({
91 78 url: cartAdd,
92 79 data: param,
93 80 success: (res) => {
94 81 console.log('add-parm', param)
95 82 console.log('addcart===>res.data===>', res.data)
96   - // commit('INIT', res.data.data)
  83 + // commit('INIT', res.data.data)
  84 + resolve(res.data)
97 85 },
98 86 fail: (res) => {
99   - console.log('fail status === > ', res)
  87 + console.log('添加购物车失败 === > ', res)
100 88 },
101 89 complete: (res) => {
102   - console.log('complete status === > ', res)
  90 + console.log('添加购物车完成 === > ', res)
103 91 },
104   - })
  92 + }))
105 93 },
106 94 }
107 95  
... ...
src/store/modules/details.js
Diff comments   View file @7614465
... ... @@ -0,0 +1,159 @@
  1 +import urlAlias from '../url'
  2 +import request from '../request'
  3 +
  4 +const {
  5 + read,
  6 + cartList,
  7 + makePost,
  8 +} = urlAlias
  9 +
  10 +const state = {
  11 + // 为配合参数选择框
  12 + goodInfo: {},
  13 + // 轮播图
  14 + carousel: [
  15 + '/static/img/detail/d9.png',
  16 + ],
  17 + // 商品基本信息
  18 + goodsInfo: {
  19 + name: '暂无名称',
  20 + price: '暂无价格',
  21 + discountPrice: undefined,
  22 + tradeNumber: undefined,
  23 + },
  24 + // 商品介绍
  25 + tag: {
  26 + prod_tag_style: [{
  27 + label: '青春学子风',
  28 + value: '54',
  29 + }],
  30 + },
  31 + // 规格参数
  32 + specification: [
  33 + { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
  34 + { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
  35 + { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
  36 + { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
  37 + { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
  38 + { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克（grams）' },
  39 + ],
  40 + // 评价
  41 + evaluate: {
  42 + rate: '100%',
  43 + star: 5,
  44 + tag: [{ name: '价格实惠' }],
  45 + },
  46 + // 商品详情
  47 + more: '',
  48 + // 购物车数目
  49 + cartNumber: 0,
  50 + // skuList
  51 + skuList: [],
  52 + postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png',
  53 +}
  54 +
  55 +const mutations = {
  56 + INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => {
  57 + state.goodInfo = goodInfo
  58 + state.carousel = carousel
  59 + state.goodsInfo = goodsInfo
  60 + state.tag = tag
  61 + state.specification = specification
  62 + state.evaluate = evaluate
  63 + state.more = more
  64 + state.skuList = skuList
  65 + },
  66 + CART: (state, number) => {
  67 + state.cartNumber = number
  68 + },
  69 + POST: (state, url) => {
  70 + state.postUrl = url
  71 + },
  72 +}
  73 +
  74 +const actions = {
  75 + // 获取详情
  76 + details({ commit, rootState }, param) {
  77 + return new Promise((resolve, reject) => request({
  78 + url: read,
  79 + data: param,
  80 + success: ({ data: { data } }) => {
  81 + console.log('data.tag', data.tag)
  82 + // 规格参数设置
  83 + const specification = rootState.details.specification
  84 + const parameter = {
  85 + frame_width: data.frame_width,
  86 + glass_width: data.glass_width,
  87 + glass_height: data.glass_height,
  88 + nose_width: data.nose_width,
  89 + leg_long: data.leg_long,
  90 + weight: data.weight,
  91 + }
  92 + for (let index = 0; index < specification.length; index++) {
  93 + if (specification[index].key !== 'weight') {
  94 + specification[index].slength = `${parameter[specification[index].key]}mm`
  95 + } else {
  96 + specification[index].slength = `${parameter[specification[index].key]}克（grams）`
  97 + }
  98 + }
  99 +
  100 + commit('INIT', {
  101 + goodInfo: data,
  102 + skuList: data.skuList,
  103 + carousel: data.pics,
  104 + goodsInfo: {
  105 + name: data.p_name,
  106 + price: data.priceArea.Min_Price,
  107 + discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
  108 + tradeNumber: data.trade_num,
  109 + },
  110 + tag: data.tag,
  111 + specification,
  112 + evaluate: {
  113 + rate: data.judgeInfo.good,
  114 + tag: data.judge_tag,
  115 + star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
  116 + },
  117 + // eslint-disable-next-line
  118 + more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
  119 + })
  120 + resolve(data)
  121 + },
  122 + fail: (res) => {
  123 + console.log('fail status ===>', res)
  124 + },
  125 + }))
  126 + },
  127 + // 获取购物车列表
  128 + getCartNumber({ commit }, param) {
  129 + return new Promise((resolve) => request({
  130 + url: cartList,
  131 + data: param,
  132 + success: ({ data: { data } }) => {
  133 + let number = 0
  134 + for (let index = 0; index < data.length; index++) {
  135 + number += Number(data[index].num)
  136 + }
  137 + commit('CART', number)
  138 + },
  139 + }))
  140 + },
  141 + // 生成分享海报
  142 + post({ commit }, param) {
  143 + return new Promise((resolve) => request({
  144 + url: makePost,
  145 + data: param,
  146 + success: ({ data }) => {
  147 + commit('POST', data.data)
  148 + resolve()
  149 + },
  150 + }))
  151 + },
  152 +}
  153 +
  154 +export default {
  155 + namespaced: true,
  156 + state,
  157 + mutations,
  158 + actions,
  159 +}
... ...
src/store/modules/index.js
Diff comments   View file @7614465
... ... @@ -7,11 +7,365 @@
7 7 search,
8 8 } = urlAlias;
9 9  
  10 +let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",
  11 + "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",
  12 + "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}
  13 +var initArr = [1,2,3,4,5,6,7,8]
  14 +let list = []
  15 +initArr.forEach(function (value) {
  16 + list.push(initData)
  17 +});
  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 +
  363 +//初始化数据是为了显示默认骨架
10 364 const state = {
11 365 categoryList: [],
12   - list: []
  366 + list: list
13 367 };
14   -
  368 +
15 369 const mutations = {
16 370 LIST: (state, list) => {
17 371 state.list = list;
... ... @@ -25,10 +379,9 @@
25 379 category({
26 380 commit
27 381 }, param) {
28   - request({
  382 + return new Promise((resolve) => request({
29 383 url: category,
30 384 success: (res) => {
31   - console.log('category', res);
32 385 let data = res.data.data;
33 386 for (let i = 0; i <= data.length; i++) {
34 387 if (data[i] && data[i].type !== 'filter') {
... ... @@ -40,35 +393,32 @@
40 393 name: "全部",
41 394 value: "all",
42 395 isNoPull: true,
43   -
44 396 });
45 397 commit('CATEGORY', data);
  398 + resolve(data)
46 399 },
47 400 fail: (res) => {
48 401 console.log("fail status === > ", res);
49   - },
50   - complete: (res) => {
51   - console.log("complete status === > ", res);
52   - },
53   - })
  402 + }
  403 + }))
  404 +
54 405 },
55 406 list({
56 407 commit
57 408 }, param) {
58   -
59   - request({
  409 + return new Promise((resolve) => request({
60 410 url: shopList,
61 411 success: (res) => {
62 412 commit('LIST', res.data.data)
  413 + resolve(res.data)
63 414 },
64 415 fail: (res) => {
65 416 console.log("fail status === > ", res);
66 417 },
67 418 complete: (res) => {
68   - console.log("complete status === > ", res);
69 419 state.isLoading = false;
70 420 },
71   - })
  421 + }))
72 422 },
73 423 search({
74 424 commit
... ... @@ -76,9 +426,8 @@
76 426 params,
77 427 keyword
78 428 }) {
79   - const uid = uni.getStorageSync('uid');
80   - console.log("params", params, keyword);
81   - request({
  429 + const uid = uni.getStorageSync('uid');
  430 + return new Promise((resolve) => request({
82 431 url: search,
83 432 data: {
84 433 params: JSON.stringify(params),
... ... @@ -88,14 +437,13 @@
88 437 },
89 438 success: (res) => {
90 439 commit('LIST', res.data.data);
  440 + resolve(res.data)
91 441 },
92 442 fail: (res) => {
93 443 console.log("fail status === > ", res);
94   - },
95   - complete: (res) => {
96   - console.log("complete status === > ", res);
97   - },
98   - })
  444 + }
  445 + }))
  446 +
99 447 },
100 448 };
101 449  
... ...
src/store/modules/orderRead.js
Diff comments   View file @7614465
... ... @@ -17,13 +17,15 @@ const mutations = {
17 17  
18 18 const actions = {
19 19 getOrderInfo({ commit }, param) {
20   - request({
  20 + return new Promise ((resolve) => request({
21 21 url: orderRead,
22 22 data: param,
23   - success: (res) => {
24   - commit("INIT", res.data.data)
  23 + success: (res) => {
  24 + console.log(res)
  25 + commit("INIT", res.data.data)
  26 + resolve(res.data.data)
25 27 }
26   - })
  28 + }))
27 29 }
28 30 }
29 31  
... ...
src/store/modules/read.js
Diff comments   View file @7614465
... ... @@ -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 }
... ...
src/store/modules/statusConfirm.js
Diff comments   View file @7614465
... ... @@ -13,19 +13,7 @@ const actions = {
13 13 data: param|| { },
14 14 success: (res) => {
15 15 console.log(res.data);
16   - if(res.data.code === 1){
17   - uni.showToast({
18   - title:'已确认',
19   - mask:true,
20   - duration:1500,
21   - icon:'success'
22   - })
23   - }else{
24   - uni-uni.showToast({
25   - title: '服务器错误，确认失败!',
26   - mask:true
27   - });
28   - }
  16 +
29 17 },
30 18 })
31 19 }
... ...
... ... @@ -35,6 +35,7 @@ const urlAlias = {
35 35 detailStandardList: '/app/prod/read', // 获取商品的详细信息
36 36 // 选购页
37 37 detailStandardUrl: '/app/prod/read', // 获取商品的详细信息
  38 + makePost: '/app/glass/makeProdAdvPic', // 生成分享海报
38 39  
39 40 // 地址管理
40 41 editAddress: '/app/address/edit_address', // 编辑地址
... ...
src/vue.config.js
Diff comments   View file @7614465
... ... @@ -14,4 +14,20 @@
14 14 // }
15 15 // },
16 16 // }
17   -// }
18 17 \ No newline at end of file
  18 +// }
  19 +
  20 +module.exports = {
  21 + chainWebpack: (config) => {
  22 + // 发行或运行时启用了压缩时会生效
  23 + config.optimization.minimizer('terser').tap((args) => {
  24 + const compress = args[0].terserOptions.compress
  25 + // 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
  26 + compress.drop_console = true
  27 + compress.pure_funcs = [
  28 + '__f__', // App 平台 vue 移除日志代码
  29 + // 'console.debug' // 可移除指定的 console 方法
  30 + ]
  31 + return args
  32 + })
  33 + },
  34 +}
... ...