刘文博 / gulu-vue

Browse Code »

Commit 607bc3a4d6e98e95f8bc2f4adf328cf1331ae013

Authored by BigBoss 2020-06-01 16:20:02 +0800

1 parent d495801abe

Exists in master

修改了直接购买的流程，添加弹窗，选择信息的合并等

Showing 9 changed files with 1333 additions and 177 deletions Show diff stats

src/common/data.js

View file @d495801

1	// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,		File was deleted
2	// 组件的返回结果是有菜单数组下标形式返回,
3	// 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
4	/*
5	[
6	{
7	"name":"", //字符串类型选填项菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
8	"type":"" //字符串类型必填项可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
9	"submenu":[ //对象数组类型必填项子菜单数据
10	{
11	"name":"", //字符串类型必填项菜单名称
12	"value":"", //字符串类型选填项自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
13	"submenu":[ //对象数组类型必填项子菜单数据
14	{
15	"name":"", //字符串类型必填项菜单名称
16	"value":"", //字符串类型选填项自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
17	"submenu":[ //对象数组类型必填项子菜单数据 filter类型无效
18	{
19	"name":"", //字符串类型必填项菜单名称 hierarchy类型层级最多到此
20	"value":"", //字符串类型选填项自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
21	}
22	]
23	}
24	]
25	}
26	]
27	}
28	]
29	*/
30
31	//0.0.4版本起返回结果将有两部分组成:
32	/*
33	{
34	index:[], //旧版本的下标数组形式
35	value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
36	}
37	*/
38	// 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
39	// 数据较长，请仔细查看。
40
41
42	export default [
43	{
44	"name":'综合',
45	"type": 'filter',
46	"submenu": [{
47	"submenu": [
48
49	]
50	},
51	],
52	},
53	{
54	"name":'品牌',
55	"type": 'filter',
56	"submenu": [{
57	// "name": '品牌',
58	// "value": "品牌",
59	"submenu": [{
60	"name": "帕森",
61	"value": "帕森",
62	},
63	{
64	"name": "海伦凯勒",
65	"value": "海伦凯勒",
66	},
67	]
68	},
69	]
70	},
71	{
72	"name":'功能',
73	"type": 'filter',
74	"submenu": [{
75	"submenu": [{
76	"name": "满减活动",
77	"value": "满减活动"
78	},
79	{
80	"name": "打折优惠",
81	"value": "打折优惠"
82	},
83	{
84	"name": "会员专享",
85	"value": "会员专享"
86	}
87	]
88	}
89	]
90	},
91	{
92	"name":'材质',
93	"type": 'filter',
94	"submenu": [{
95	"submenu": [{
96	"name": "满减活动",
97	"value": "满减活动"
98	},
99	{
100	"name": "打折优惠",
101	"value": "打折优惠"
102	},
103	{
104	"name": "会员专享",
105	"value": "会员专享"
106	}
107	]
108	}
109	]
110	},
111	{
112	"name":'折扣',
113	"type": 'filter',
114	"submenu": [{
115	"name": "折扣(多选)",
116	"submenu": [{
117	"name": "满减活动",
118	"value": "满减活动"
119	},
120	{
121	"name": "打折优惠",
122	"value": "打折优惠"
123	},
124	{
125	"name": "会员专享",
126	"value": "会员专享"
127	}
128	]
129	}
130	]
131	}
132	]
133
134		1	// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,

src/pages/confirmOrder/confirmOrder.vue

Diff comments View file @607bc3a

 <template>
   <view class="wrap">
     <view></view>
     <view
       class="addAddress"
       @tap="toaddAddress"
       v-if="this.showAddress"
     >
       <view class="addIcon">
         <image
           src="../../static/add.png"
           mode="aspectFill"
         ></image>
       </view>
       <view class="addressText">{{addAddress}}</view>
       <image
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view
       v-else
       @tap="toaddAddress"
       class="list order-user"
     >
       <view class="order-user-head">
         <view class="name">
           <view
             v-if="addressInfo.default === '1'"
             class="default"
           ><text>默认</text></view>{{addressInfo.name}}
         </view>
         <text class="mobile">{{addressInfo.mobile}}</text>
       </view>
       <view class="order-user-body">
         <image src="../../static/myorder-paying-location.png"></image>
-        <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
+        <text class="address">{{addressInfo.address}}\n{{addressInfo.add_detail}}</text>
       </view>
       <image
         class="arrow"
         src="../../static/right.png"
         mode="aspectFill"
       ></image>
     </view>
     <view class="content">
       <view class="orderInfo">
         <view class="title">
           <image
             src="../../static/store.png"
             mode="aspectFill"
             style="width: 40rpx;height: 40rpx;"
           ></image>
           <text>非常戴镜</text>
         </view>
         <view class="infoBox">
           <view class="infoTop">
             <image
               :src="goodInfo.img_index_url"
               mode="aspectFill"
             ></image>
             <view class="infoRight">
-              <text class="goodName">商品名称商品名称商品名称名称名称</text>
+              <text class="goodName">{{goodInfo.p_name}}</text>
               <text class="remarks">支持7天无理由退货 顺丰发货</text>
               <view class="priceBox">
                 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
                     ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
                   </text></view>
                 <view class="counter">
                   <view
                     class="btn"
                     disabled="this.disabled"
                     type="default"
                     @click="counter(false)"
                   >-</view>
                   <text>{{count}}</text>
                   <view
                     class="btn"
                     type="default"
                     @click="counter(true)"
                   >+</view>
                 </view>
               </view>
             </view>
           </view>
           <view class="infoBottom">
             <view class="norm">规格 <text>
                 <!-- 长度超出变省略号未做 -->
                 <block
                   v-for="(item, index) in current"
                   :key="index"
                 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
                 </block>
               </text></view>
+            <view class="shippingMethod">使用人 <text>
+                {{name}}
+              </text></view>
             <view class="shippingMethod">配送方式 <text>快递</text></view>
             <view class="message">买家留言
               <input
                 type="text"
                 :value="note"
                 placeholder="建议提前协商(50字以内)"
               />
             </view>
           </view>
         </view>
       </view>
       <view class="payWay">
         <view class="item">
           <text>支付方式</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="choosePayWay">
                 <image
                   src="../../static/chat_logo.png"
                   mode="aspectFill"
                 ></image>
                 <text>微信支付</text>
               </view>
               <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
             </view>
             <!-- <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image> -->
           </view>
         </view>
         <!-- <view class="item">
           <text>优惠券</text>
           <view class="itemRight">
             <view class="rightText">
               <view class="chooseOffers">
                 <text>-￥70.00</text>
               </view>
               <view class="preferentialWay">最大优惠</view>
             </view>
             <image
               src="../../static/right.png"
               mode="aspectFill"
             ></image>
           </view>
         </view> -->
         <view class="item">
           <text>运费</text>
           <view class="itemRight">
             <view class="freight">免运费</view>
           </view>
         </view>
         <view class="item">
           <text>合计</text>
           <view class="itemRight">
             <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
           </view>
         </view>
       </view>
       <!--
       <view class="checkBox">
         <checkbox-group>
           <label>
             <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
           </label>
         </checkbox-group>
       </view> -->
     </view>
     <view class="last_zhanwei"></view>
     <view class="footer">
       <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
       <view class="footerRight">
         <view
           class="paybtn"
           @tap="orderBuild"
         >立即支付</view>
       </view>
     </view>
   </view>
 </template>
 <script>
 import store from '@/store'
 import MD5Util from '../../utils/md5'
 export default {
   data() {
     return {
+		name:String,
       addAddress: '添加收货地址',
       count: 1,
       pid: 0,
       disabled: false,
       freight: 0.0,
       showAddress: false,
       note: '',
       addressInfo: {
         address: '',
       },
       // isAnonymous:
     }
   },
-  onLoad({ pid, addressId, isCart }) {
+  onLoad({ pid, addressId, isCart ,count,name}) {
-    this.pid = pid
+    this.pid = pid;
+	this.count = count;
+	this.name = name;
+    store.dispatch('read/fetch', {
+      pid,
+    })
+	console.log('++++++++++++'+pid,addressId,isCart,count)
     // 若已经选择地址
     if (addressId) {
       store
         .dispatch('address/details', {
           add_id: addressId,
         })
         .then(({ code, data }) => {
           if (code === 1) {
             console.log('code', code, data)
             this.showAddress = true
             this.addressInfo = data
           }
         })
     } else {
       store.dispatch('address/default').then(({ code, data }) => {
         if (code === 1) {
           console.log('code', code, data)
           this.showAddress = true
           this.addressInfo = data
         }
       })
     }
-    store.dispatch('read/fetch', {
-      pid,
-    })
   },
   computed: {
     goodInfo() {
-      console.log('state', this.$store.state)
+      console.log('state', this.$store.state.read.goodInfo)
       return this.$store.state.read.goodInfo
     },
     skuInfo() {
       return this.$store.state.order.param.sk_id_arr
     },
     attrList() {
       return this.$store.state.order.param.attrList
     },
     current() {
       return this.$store.state.order.param.current
     },
   },
   methods: {
     counter(isadd) {
       if (isadd) {
         this.count++
       } else {
         this.count <= 1 ? (this.disabled = true) : this.count--
       }
     },
     // 跳转添加地址页面
     toaddAddress() {
       uni.navigateTo({
         url: `../address/addressList?edit=${1}`,
         success: res => {},
         fail: error => {
           console.log('跳转到地址列表页面失败====>', error)
         },
         complete: () => {},
       })
     },
     // 下单
     orderBuild() {
       uni.showLoading({
         title: '支付中',
       })
       console.log('this', this.$store.state)
       const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
       store.dispatch('order/buyNow', {
         pid: skId.pid,
         sk_id: skId.sk_id,
         number: this.count,
         mp_id: mpId,
         address: JSON.stringify(this.addressInfo),
         totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
         liuyan: this.note,
         dir: 1,
       }).then((res) => {
         this.pay(res.data)
       })
     },
     // 支付
     pay(res) {
       console.log('pay', res)
       const { data, exKeyName: keyName } = res
       const uid = uni.getStorageSync('uid')
       const timeStamp = new Date().getTime().toString()
       const nonceStr = 'asfafasfasfasfasf'
       // 支付参数
       const fieldSet = {
         openid: this.$store.state.user.userInfo.openid,
         uid: this.$store.state.user.userInfo.uid,
         shopid: 0,
         payCate: 2020,
         payMoney: Number(this.skuInfo.real_price) * this.count * 100,
         payWoodId: `fcdj-${uid}-${keyName}`,
         payWoodDesc: '在【非常戴镜】的微信付款凭证',
         nonceStr,
         signType: 'MD5',
         app_uid: 2020,
         timeStamp,
         keyname: keyName,
         billInfo: JSON.stringify(data),
       }
       // 请求后台支付接口
       store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
         if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
           const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
           const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
           // 微信支付接口
           uni.requestPayment({
             appId: data.appid,
             timeStamp,
             nonceStr,
             total_fee: Number(this.skuInfo.real_price) * this.count * 100,
             package: `prepay_id=${data.prepay_id}`,
             signType: 'MD5',
             paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
             success: (res) => {
               // 支付成功
               uni.showModal({
                 content: '支付成功',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待收货
               uni.reLaunch({
-                url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
+                url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&isPay=1`,
               })
             },
             fail: (res) => {
               // 支付失败
               uni.showModal({
                 content: '支付失败',
                 showCancel: false,
               })
               // 跳转订单详情页->状态 待付款
               uni.reLaunch({
-                url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
+                url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&isPay=1`,
               })
             },
             complete: () => {
               uni.hideLoading()
             },
           })
         } else {
           uni.showModal({
             content: '支付失败',
             showCancel: false,
           })
           console.log('支付失败')
           uni.hideLoading()
         }
       })
     },
   },
 }
 </script>
 <style lang="scss">
 .wrap {
   height: 100vh;
   background-color: #f2f2f2;
   font-family: PingFangSC-Regular;
   letter-spacing: -0.23px;
   position: absolute;
 }
 .addAddress {
   background-color: #ffffff;
   box-sizing: border-box;
   height: 124rpx;
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0 40rpx;
   .addIcon {
     background-color: #f2f2f2;
     height: 56rpx;
     width: 60rpx;
     border-radius: 4rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 40rpx;
   }
   image {
     height: 28rpx;
     width: 30rpx;
   }
   .addressText {
     font-size: 28rpx;
     color: #333333;
     margin-right: 364rpx;
   }
 }
 .content {
   background-color: #f2f2f2;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 40rpx;
   box-sizing: border-box;
   .orderInfo {
     width: 670rpx;
-    height: 488rpx;
+    min-height: 488rpx;
     background-color: #ffffff;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 40rpx 40rpx 40rpx;
     .title {
       display: flex;
       align-items: center;
       font-size: 28rpx;
       color: #333333;
       height: 60rpx;
       line-height: 40rpx;
       padding: 10rpx 10rpx 10rpx 0rpx;
       image {
         margin-right: 20rpx;
       }
     }
     .infoBox {
       margin-top: 42rpx;
       .infoTop {
         display: flex;
         flex-direction: row;
         image {
           height: 188rpx;
           width: 188rpx;
           margin-right: 24rpx;
         }
         .infoRight {
           width: 374rpx;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
           .goodName {
             font-size: 28rpx;
             color: #333333;
           }
           .remarks {
             font-size: 20rpx;
             color: #999999;
           }
           .priceBox {
             display: flex;
             justify-content: space-between;
             align-items: center;
             width: 100%;
             .price {
               color: #ff6b4a;
               font-size: 28rpx;
             }
             .originCost {
               text-decoration: line-through;
               color: #999999;
               font-size: 20rpx;
             }
             .counter {
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               font-size: 28rpx;
               color: #333333;
               width: 122rpx;
               .btn {
                 display: flex;
                 justify-content: center;
                 line-height: 32rpx;
                 height: 32rpx;
                 width: 32rpx;
                 background-color: #f2f2f2;
                 color: #cfcfcf;
               }
             }
           }
         }
       }
       .infoBottom {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         font-size: 24rpx;
         color: #333333;
         text {
           color: #999999;
           margin-left: 20rpx;
         }
         .norm {
           margin-top: 28rpx;
         }
         .shippingMethod {
           margin-top: 12rpx;
         }
         .message {
           display: flex;
           flex-direction: row;
           align-items: center;
           margin-top: 18rpx;
           input {
             margin-left: 20rpx;
             width: 75%;
           }
         }
       }
     }
   }
   .payWay {
     height: 464rpx;
     width: 670rpx;
     background-color: #ffffff;
     color: #333333;
     font-size: 24rpx;
     border-radius: 20rpx;
     box-sizing: border-box;
     padding: 0 52rpx 0rpx 40rpx;
     margin-top: 20rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     .item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       height: 115rpx;
       .itemRight {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         image {
           height: 24rpx;
           width: 12rpx;
         }
         .rightText {
           margin-right: 20rpx;
           text-align: right;
           .choosePayWay {
             display: flex;
             align-items: center;
             text {
               color: #333333;
             }
             image {
               height: 36rpx;
               width: 40rpx;
               margin-right: 8px;
             }
           }
           .randomSubstraction {
             color: #ff6b4a;
           }
           .preferentialWay {
             color: #999999;
           }
         }
         .freight,
         .total {
           margin-right: 32rpx;
         }
         text {
           color: #ff6b4a;
         }
       }
     }
   }
   // .checkBox {
   //   height: 58rpx;
   //   line-height: 58rpx;
   //   width: 100%;
   //   margin-top: 36rpx;
   //   margin-left: 40rpx;
   //   font-size: 12px;
   //   color: #999999;
   // }
 }
 .footer {
   height: 112rpx;
   width: 100%;
   background-color: #fff;
   font-size: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   bottom: 0;
   .footerLeft {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
     color: #333333;
     text {
       color: #ff6b4a;
     }
   }
   .footerRight {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     width: 50%;
     margin-right: 26rpx;
     .paybtn {
       display: flex;
       justify-content: center;
       align-items: center;
       background: #ff6b4a;
       border-radius: 20px;
       border-radius: 20px;
       color: #ffffff;
       width: 204rpx;
       height: 80rpx;
     }
   }
 }
 // 地址信息样式
 .order-user {
   width: 670rpx;
   height: 228rpx;
   background: #ffffff;
   border-radius: 14rpx;
   margin: 0 auto;
   margin-top: 20rpx;
   position: relative;
   .order-user-head {
     display: flex;
     height: 108rpx;
     width: 100%;
     align-items: center;
-    margin-left: 126rpx;
+    padding-left: 126rpx;
+	box-sizing: border-box;
     .name {
       display: flex;
       justify-content: space-between;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
       margin-right: 20rpx;
       .default {
         height: 40rpx;
         width: 80rpx;
         background-color: #4a90e2;
         border-radius: 13px;
         border-radius: 13px;
         text-align: center;
         margin-right: 20rpx;
         text {
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 12px;
           color: #ffffff;
           letter-spacing: -0.23px;
         }
       }
     }
     .mobile {
       font-size: 14px;
       color: #999999;
       letter-spacing: -0.26px;
     }
   }
   .order-user-body {
     display: flex;
     width: 100%;
     image {
       width: 24px;
       height: 28px;
       margin: 12rpx 32rpx 0 40rpx;
     }
     .address {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       letter-spacing: -0.26px;
     }
   }
   .arrow {
     width: 12px;
     height: 12px;
     position: absolute;
     right: 40rpx;
     bottom: 104rpx;
   }
 }
 .last_zhanwei{
   background: #f2f2f2;
   height: 60px;

src/pages/frameDetail/components/BottomSheet.vue

Diff comments View file @607bc3a

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

src/pages/frameDetail/frameDetail.vue

Diff comments View file @607bc3a

1	<template>	1	<template>
2	<view class="container">	2	<view class="container">
3	<view class="D1">	3	<view class="D1">
4	<!-- 轮播图 -->	4	<!-- 轮播图 -->
5	<swiper	5	<swiper
6	class="swiperImage"	6	class="swiperImage"
7	:indicator-dots="true"	7	:indicator-dots="true"
8	:autoplay="true"	8	:autoplay="true"
9	:interval="4000"	9	:interval="4000"
10	:duration="500"	10	:duration="500"
11	>	11	>
12	<swiper-item	12	<swiper-item
13	v-for="(item, index) in goodInfo.pics"	13	v-for="(item, index) in goodInfo.pics"
14	:key="index"	14	:key="index"
15	>	15	>
16	<image	16	<image
17	:src="item"	17	:src="item"
18	mode="scaleToFill"	18	mode="scaleToFill"
19	></image>	19	></image>
20	</swiper-item>	20	</swiper-item>
21	</swiper>	21	</swiper>
22	<view class="D1_price">￥{{goodInfo.priceArea.Min_Price \|\| '暂无'}}<span class="D1_number">{{goodInfo.trade_num \|\| '暂无'}}人购买过</span></view>	22	<view class="D1_price">￥{{goodInfo.priceArea.Min_Price \|\| '暂无'}}<span class="D1_number">{{goodInfo.trade_num \|\| '暂无'}}人购买过</span></view>
23	<view class="D1_name"><span class="D1_name1">{{goodInfo.p_name \|\| '暂无'}}</span></view>	23	<view class="D1_name"><span class="D1_name1">{{goodInfo.p_name \|\| '暂无'}}</span></view>
24	<view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>	24	<view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25	</view>	25	</view>
26	<view	26	<view
27	class="D2"	27	class="D2"
28	v-if="updateGoodType == 2 \|\| updateGoodType == 4"	28	v-if="updateGoodType == 2 \|\| updateGoodType == 4"
29	>	29	>
30	<view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	30	<view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31	<view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>	31	<view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>	32	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33	</view>	33	</view>
34	<!-- <view	34	<!-- <view
35	class="D2"	35	class="D2"
36	v-if="updateGoodType == 1"	36	v-if="updateGoodType == 1"
37	>	37	>
38	<view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	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>	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>	40	<view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41	</view>	41	</view>
42	<view	42	<view
43	class="D2"	43	class="D2"
44	v-if="updateGoodType == 3"	44	v-if="updateGoodType == 3"
45	>	45	>
46	<view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>	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>	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>	48	<view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49	</view> -->	49	</view> -->
50	<view class="D3">	50	<view class="D3">
51	<view class="screenBar">	51	<view class="screenBar">
52	<view	52	<view
53	v-for="item in screenItems"	53	v-for="item in screenItems"
54	:key="item.current"	54	:key="item.current"
55	@click="tabChange(item.current)"	55	@click="tabChange(item.current)"
56	>	56	>
57	<view	57	<view
58	class="screenItem"	58	class="screenItem"
59	v-bind:class="{ active: current === item.current }"	59	v-bind:class="{ active: current === item.current }"
60	>{{ item.text \|\| '暂无' }}</view>	60	>{{ item.text \|\| '暂无' }}</view>
61	</view>	61	</view>
62	</view>	62	</view>
63	<view	63	<view
64	class="screen-item"	64	class="screen-item"
65	v-if="current === 1"	65	v-if="current === 1"
66	>	66	>
67	<view class="D3_list">	67	<view class="D3_list">
68	<view	68	<view
69	v-for="(item) in parameter"	69	v-for="(item) in parameter"
70	:key="item.key"	70	:key="item.key"
71	>	71	>
72	<image	72	<image
73	class="D3_image"	73	class="D3_image"
74	v-bind:src="item.img"	74	v-bind:src="item.img"
75	></image>	75	></image>
76	<span>{{item.standard \|\| '暂无'}}</span>	76	<span>{{item.standard \|\| '暂无'}}</span>
77	<span>{{item.slength \|\| '暂无'}}</span>	77	<span>{{item.slength \|\| '暂无'}}</span>
78	</view>	78	</view>
79	</view>	79	</view>
80	</view>	80	</view>
81	<view	81	<view
82	class="screen-item"	82	class="screen-item"
83	v-if="current === 0"	83	v-if="current === 0"
84	>	84	>
85	<view class="D3_list">	85	<view class="D3_list">
86	<!-- <block>	86	<!-- <block>
87	<view>主体</view>	87	<view>主体</view>
88	<view>商品产地：韩国</view>	88	<view>商品产地：韩国</view>
89	<view>包装清单：彩色隐形 * 1</view>	89	<view>包装清单：彩色隐形 * 1</view>
90	</block> -->	90	</block> -->
91	<!-- 迭代时建议配合接口修改为数组 -->	91	<!-- 迭代时建议配合接口修改为数组 -->
92	<view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">	92	<view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93	<view class="">	93	<view class="">
94	年龄：<view	94	年龄：<view
95	v-for="(item,index) in tag.prod_tag_age"	95	v-for="(item,index) in tag.prod_tag_age"
96	:key="index"	96	:key="index"
97	>	97	>
98	{{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>	98	{{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99	</view>	99	</view>
100	</view>	100	</view>
101	</view>	101	</view>
102	<view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">	102	<view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103	<view class="">	103	<view class="">
104	颜色：<view	104	颜色：<view
105	v-for="(item,index) in tag.prod_tag_color"	105	v-for="(item,index) in tag.prod_tag_color"
106	:key="index"	106	:key="index"
107	>	107	>
108	{{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>	108	{{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109	</view>	109	</view>
110	</view>	110	</view>
111	</view>	111	</view>
112	<view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">	112	<view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113	<view class="">	113	<view class="">
114	脸型：<view	114	脸型：<view
115	v-for="(item,index) in tag.prod_tag_face"	115	v-for="(item,index) in tag.prod_tag_face"
116	:key="index"	116	:key="index"
117	>	117	>
118	{{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>	118	{{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119	</view>	119	</view>
120	</view>	120	</view>
121	</view>	121	</view>
122	<view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">	122	<view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123	<view class="">	123	<view class="">
124	赠品：<view	124	赠品：<view
125	v-for="(item,index) in tag.prod_tag_freesend"	125	v-for="(item,index) in tag.prod_tag_freesend"
126	:key="index"	126	:key="index"
127	>	127	>
128	{{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>	128	{{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129	</view>	129	</view>
130	</view>	130	</view>
131	</view>	131	</view>
132	<view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">	132	<view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133	<view class="">	133	<view class="">
134	保险：<view	134	保险：<view
135	v-for="(item,index) in tag.prod_tag_insurance"	135	v-for="(item,index) in tag.prod_tag_insurance"
136	:key="index"	136	:key="index"
137	>	137	>
138	{{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>	138	{{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139	</view>	139	</view>
140	</view>	140	</view>
141	</view>	141	</view>
142	<view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">	142	<view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143	<view class="">	143	<view class="">
144	材质：<view	144	材质：<view
145	v-for="(item,index) in tag.prod_tag_metal"	145	v-for="(item,index) in tag.prod_tag_metal"
146	:key="index"	146	:key="index"
147	>	147	>
148	{{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>	148	{{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149	</view>	149	</view>
150	</view>	150	</view>
151	</view>	151	</view>
152	<view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">	152	<view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153	<view class="">	153	<view class="">
154	个性：<view	154	个性：<view
155	v-for="(item,index) in tag.prod_tag_personal"	155	v-for="(item,index) in tag.prod_tag_personal"
156	:key="index"	156	:key="index"
157	>	157	>
158	{{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>	158	{{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159	</view>	159	</view>
160	</view>	160	</view>
161	</view>	161	</view>
162	<view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">	162	<view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163	<view class="">	163	<view class="">
164	场景：<view	164	场景：<view
165	v-for="(item,index) in tag.prod_tag_sense"	165	v-for="(item,index) in tag.prod_tag_sense"
166	:key="index"	166	:key="index"
167	>	167	>
168	{{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>	168	{{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169	</view>	169	</view>
170	</view>	170	</view>
171	</view>	171	</view>
172	<view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">	172	<view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173	<view class="">	173	<view class="">
174	性别：<view	174	性别：<view
175	v-for="(item,index) in tag.prod_tag_sex"	175	v-for="(item,index) in tag.prod_tag_sex"
176	:key="index"	176	:key="index"
177	>	177	>
178	{{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>	178	{{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179	</view>	179	</view>
180	</view>	180	</view>
181	</view>	181	</view>
182	<view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">	182	<view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183	<view class="">	183	<view class="">
184	风格：<view	184	风格：<view
185	v-for="(item,index) in tag.prod_tag_style"	185	v-for="(item,index) in tag.prod_tag_style"
186	:key="index"	186	:key="index"
187	>	187	>
188	{{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>	188	{{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189	</view>	189	</view>
190	</view>	190	</view>
191	</view>	191	</view>
192	<view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">	192	<view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193	<view class="">	193	<view class="">
194	重量：<view	194	重量：<view
195	v-for="(item,index) in tag.prod_tag_weight"	195	v-for="(item,index) in tag.prod_tag_weight"
196	:key="index"	196	:key="index"
197	>	197	>
198	{{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>	198	{{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199	</view>	199	</view>
200	</view>	200	</view>
201	</view>	201	</view>
202	</view>	202	</view>
203	</view>	203	</view>
204	<view	204	<view
205	class="screen-item "	205	class="screen-item "
206	v-if="current ===2"	206	v-if="current ===2"
207	>	207	>
208	<view class="customerService">	208	<view class="customerService">
209	<view class="serviceItem">	209	<view class="serviceItem">
210	<view class="title">	210	<view class="title">
211	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	211	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212	<text class="titleText">卖家服务</text>	212	<text class="titleText">卖家服务</text>
213	</view>	213	</view>
214	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>	214	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215	</view>	215	</view>
216	<view class="serviceItem">	216	<view class="serviceItem">
217	<view class="title">	217	<view class="title">
218	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	218	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219	<text class="titleText">平台承诺</text>	219	<text class="titleText">平台承诺</text>
220	</view>	220	</view>
221	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>	221	<view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222	</view>	222	</view>
223	<view class="serviceItem">	223	<view class="serviceItem">
224	<view class="title">	224	<view class="title">
225	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>	225	<view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226	<text class="titleText">正品保证</text>	226	<text class="titleText">正品保证</text>
227	</view>	227	</view>
228	<view class="itemContent">向您保证所售商品均为正品行货</view>	228	<view class="itemContent">向您保证所售商品均为正品行货</view>
229	</view>	229	</view>
230	<view class="serviceItem2">	230	<view class="serviceItem2">
231	<view class="title">	231	<view class="title">
232	<text class="titleText">权利申明</text>	232	<text class="titleText">权利申明</text>
233	</view>	233	</view>
234	<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>	234	<view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235	</view>	235	</view>
236	<view class="serviceItem2">	236	<view class="serviceItem2">
237	<view class="title">	237	<view class="title">
238	<text class="titleText">价格保证</text>	238	<text class="titleText">价格保证</text>
239	</view>	239	</view>
240	<view class="itemContent">	240	<view class="itemContent">
241	<view class="itemContent-child">	241	<view class="itemContent-child">
242	<text class="contentTitle">平台价:</text>	242	<text class="contentTitle">平台价:</text>
243	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	243	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244	</view>	244	</view>
245	<view class="itemContent-child">	245	<view class="itemContent-child">
246	<text class="contentTitle">划线价:</text>	246	<text class="contentTitle">划线价:</text>
247	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	247	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248	</view>	248	</view>
249	<view class="itemContent-child">	249	<view class="itemContent-child">
250	<text class="contentTitle">平折扣:</text>	250	<text class="contentTitle">平折扣:</text>
251	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	251	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252	</view>	252	</view>
253	<view class="itemContent-child">	253	<view class="itemContent-child">
254	<text class="contentTitle">异常问题:</text>	254	<text class="contentTitle">异常问题:</text>
255	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>	255	<text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256	</view>	256	</view>
257		257
258	</view>	258	</view>
259	</view>	259	</view>
260	</view>	260	</view>
261	</view>	261	</view>
262	</view>	262	</view>
263	<view	263	<view
264	class="D4"	264	class="D4"
265	v-if="current !==2"	265	v-if="current !==2"
266	>	266	>
267	<view class="D4_esvalue">	267	<view class="D4_esvalue">
268	<view>{{esvalue}}  {{goodInfo.judgeInfo.good}}</view>	268	<view>{{esvalue}}  {{goodInfo.judgeInfo.good}}</view>
269	<view class="D4_2">	269	<view class="D4_2">
270	<view	270	<view
271	class="star"	271	class="star"
272	v-for="o in starCount"	272	v-for="o in starCount"
273	:key="o"	273	:key="o"
274	>	274	>
275	<image	275	<image
276	src="../../static/img/detail/d_star.png"	276	src="../../static/img/detail/d_star.png"
277	mode="aspectFill"	277	mode="aspectFill"
278	style="height: 26rpx; width: 28rpx;"	278	style="height: 26rpx; width: 28rpx;"
279	></image>	279	></image>
280	</view>	280	</view>
281	</view>	281	</view>
282	</view>	282	</view>
283	<view class="D4_list">	283	<view class="D4_list">
284	<view	284	<view
285	v-for="(assess) in goodInfo.judge_tag"	285	v-for="(assess) in goodInfo.judge_tag"
286	:key="assess.key"	286	:key="assess.key"
287	>{{assess.name}}</view>	287	>{{assess.name}}</view>
288	</view>	288	</view>
289	</view>	289	</view>
290	<view	290	<view
291	class="D5"	291	class="D5"
292	v-if="current !==2"	292	v-if="current !==2"
293	>	293	>
294	<view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">	294	<view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295	<image src="/static/img/detail/hr.png"></image>	295	<image src="/static/img/detail/hr.png"></image>
296	<view>商品详细</view>	296	<view>商品详细</view>
297	<image src="/static/img/detail/hr.png"></image>	297	<image src="/static/img/detail/hr.png"></image>
298	</view>	298	</view>
299	<view class="D5_all" v-html="test">	299	<view class="D5_all" v-html="test">
300	<!-- <block>	300	<!-- <block>
301	<rich-text :nodes="goodInfo.prodIntro1"></rich-text>	301	<rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302	</block> -->	302	</block> -->
303	</view>	303	</view>
304	</view>	304	</view>
305	<!-- 底部菜单 -->	305	<!-- 底部菜单 -->
306	<view class="botton">	306	<view class="botton">
307	<view	307	<view
308	@tap="toCart()"	308	@tap="toCart()"
309	class="botton_1"	309	class="botton_1"
310	>	310	>
311	<view class="cart_icon">	311	<view class="cart_icon">
312	<image v-bind:src="imgShop.img"/>	312	<image v-bind:src="imgShop.img"/>
313	<text>{{cartNumber}}</text>	313	<text>{{cartNumber}}</text>
314	</view>	314	</view>
315	<view class="botton_image">购物车</view>	315	<view class="botton_image">购物车</view>
316	</view>	316	</view>
317	<view class="botton_2">	317	<view class="botton_2">
318	<view	318	<view
319	class="botton_input"	319	class="botton_input"
320	@tap="addCart()"	320	@tap="addCart()"
321	>加入购物车</view>	321	>加入购物车</view>
322	<view	322	<view
323	class="botton_now"	323	class="botton_now"
324	@tap="goPerchase()"	324
		325	@click="showBottom()"
325	>立即购买</view>	326	>立即购买</view>
326	</view>	327	</view>
327	</view>	328	</view>
		329	<BottomSheet v-if="isShowBottom" :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
328	</view>	330	</view>
329	</template>	331	</template>
330		332
331	<script>	333	<script>
332	import store from '@/store'	334	import store from '@/store'
333	export default {	335	import BottomSheet from './components/BottomSheet.vue';
		336	export default {
		337	components:{
		338	BottomSheet,
		339	},
334	data () {	340	data () {
335	return {	341	return {
		342	isShowBottom : false, //底部弹窗开关
336	test: '',	343	test: '',
337	goodType: 2,	344	goodType: 2,
338	pid: 0,	345	pid: 0,
339	// 购物车数据	346	// 购物车数据
340	addCartList: {	347	addCartList: {
341	mp_id: 0,	348	mp_id: 0,
342	sk_id: 0,	349	sk_id: 0,
343	num: 1,	350	num: 1,
344	price: '',	351	price: '',
345	},	352	},
346	screenItems: [	353	screenItems: [
347	{ current: 0, text: '商品介绍' },	354	{ current: 0, text: '商品介绍' },
348	{ current: 1, text: '规格参数' },	355	{ current: 1, text: '规格参数' },
349	{ current: 2, text: '售后保障' },	356	{ current: 2, text: '售后保障' },
350	],	357	],
351	current: 0,	358	current: 0,
352	starCount: 5,	359	starCount: 5,
353	parameter: [	360	parameter: [
354	{ key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },	361	{ key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
355	{ key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },	362	{ key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
356	{ key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },	363	{ key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
357	{ key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },	364	{ key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
358	{ key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },	365	{ key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
359	{ key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },	366	{ key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
360	],	367	],
361	esvalue: '宝贝好评率',	368	esvalue: '宝贝好评率',
362	introduction: {	369	introduction: {
363	material: '钛合金',	370	material: '钛合金',
364	func: '抗疲劳/防辐射',	371	func: '抗疲劳/防辐射',
365	rate: '男/女',	372	rate: '男/女',
366	},	373	},
367	imgAll: '/static/img/detail/d8.png',	374	imgAll: '/static/img/detail/d8.png',
368	photoes: [	375	photoes: [
369	{ value: '日常办公', img: '/static/img/detail/d9.png' },	376	{ value: '日常办公', img: '/static/img/detail/d9.png' },
370	{ value: '上网', img: '/static/img/detail/d10.png' },	377	{ value: '上网', img: '/static/img/detail/d10.png' },
371	{ value: '追剧', img: '/static/img/detail/d11.png' },	378	{ value: '追剧', img: '/static/img/detail/d11.png' },
372	{ value: '玩游戏', img: '/static/img/detail/d12.png' },	379	{ value: '玩游戏', img: '/static/img/detail/d12.png' },
373	],	380	],
374	imgDetail: '/static/img/detail/d13.png',	381	imgDetail: '/static/img/detail/d13.png',
375	imgShop: {	382	imgShop: {
376	img: '/static/tab-cart.png',	383	img: '/static/tab-cart.png',
377	IsShown: false,	384	IsShown: false,
378	},	385	},
379	tag: {	386	tag: {
380	prod_tag_freesend: [{	387	prod_tag_freesend: [{
381	label: '眼镜盒',	388	label: '眼镜盒',
382	value: '262',	389	value: '262',
383	}],	390	}],
384	},	391	},
385	}	392	}
386	},	393	},
387	onLoad: function ({ pid, sk_id: skId }) {	394	onLoad: function ({ pid, sk_id: skId }) {
388	this.pid = pid	395	this.pid = pid
389	// console.log('sk_id=====>',sk_id)	396	// console.log('sk_id=====>',sk_id)
390	store.dispatch('read/fetch', {	397	store.dispatch('read/fetch', {
391	pid,	398	pid,
392	sk_id: skId,	399	sk_id: skId,
393	}).then(() => {	400	}).then(() => {
394	this.parameter[0].slength = `${this.goodInfo.frame_width}mm`	401	this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
395	this.parameter[1].slength = `${this.goodInfo.glass_width}mm`	402	this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
396	this.parameter[2].slength = `${this.goodInfo.glass_height}mm`	403	this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
397	this.parameter[3].slength = `${this.goodInfo.nose_width}mm`	404	this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
398	this.parameter[4].slength = `${this.goodInfo.leg_long}mm`	405	this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
399	this.parameter[5].slength = `${this.goodInfo.weight}mm`	406	this.parameter[5].slength = `${this.goodInfo.weight}mm`
400	this.tag = this.goodInfo.tag	407	this.tag = this.goodInfo.tag
401	this.test = this.goodInfo.prodIntro1	408	this.test = this.goodInfo.prodIntro1
402	this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')	409	this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
403	// addCart	410	// addCart
404	this.addCartList.price = this.goodInfo.priceArea.Min_Price	411	this.addCartList.price = this.goodInfo.priceArea.Min_Price
405	this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id	412	this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
406	this.addCartList.mp_id = this.goodInfo.glassData.mp_id	413	this.addCartList.mp_id = this.goodInfo.glassData.mp_id
407	})	414	})
408	store.dispatch('cart/getCartList')	415	store.dispatch('cart/getCartList')
409	// console.log(this.$store.state.user.userInfo.uid + 'ssss')	416	// console.log(this.$store.state.user.userInfo.uid + 'ssss')
410	},	417	},
411	computed: {	418	computed: {
412	updateGoodType () {	419	updateGoodType () {
413	return this.goodType	420	return this.goodType
414	},	421	},
415	goodInfo () {	422	goodInfo () {
416	console.log(this.$store.state.read.goodInfo)	423	// console.log(this.$store.state.read.goodInfo)
417	return this.$store.state.read.goodInfo	424	return this.$store.state.read.goodInfo
418	},	425	},
419	cartNumber() {	426	cartNumber() {
420	return this.$store.state.cart.cartList.length \|\| 0	427	return this.$store.state.cart.cartList.length \|\| 0
421	},	428	},
422	},	429	},
423	methods: {	430	methods: {
		431	//底部弹窗开关
		432	showBottom(){
		433	this.isShowBottom = true;
		434	},
		435	closeBottom(){
		436	this.isShowBottom = false;
		437	},
424	// 前往购物车	438	// 前往购物车
425	toCart() {	439	toCart() {
426	uni.switchTab({	440	uni.switchTab({
427	url: '/pages/cart/cart',	441	url: '/pages/cart/cart',
428	success: res => {},	442	success: res => {},
429	fail: (error) => { console.log('跳转购物车失败======>', error) },	443	fail: (error) => { console.log('跳转购物车失败======>', error) },
430	complete: () => { console.log('toCart') },	444	complete: () => { console.log('toCart') },
431	})	445	})
432	},	446	},
433	// 加入购物车	447	// 加入购物车
434	addCart () {	448	addCart () {
435	store.dispatch('cart/addCart', {	449	store.dispatch('cart/addCart', {
436	uid: this.$store.state.user.userInfo.uid,	450	uid: this.$store.state.user.userInfo.uid,
437	openid: this.$store.state.user.userInfo.openid,	451	openid: this.$store.state.user.userInfo.openid,
438	mp_id: this.addCartList.mp_id,	452	mp_id: this.addCartList.mp_id,
439	sk_id: this.addCartList.sk_id,	453	sk_id: this.addCartList.sk_id,
440	num: this.addCartList.num,	454	num: this.addCartList.num,
441	pid: this.pid,	455	pid: this.pid,
442	price: this.addCartList.price,	456	price: this.addCartList.price,
443	})	457	})
444	// 再次请求购物车接口，实现实时更新	458	// 再次请求购物车接口，实现实时更新
445	store.dispatch('cart/getCartList', {	459	store.dispatch('cart/getCartList', {
446	uid: this.$store.state.user.userInfo.uid,	460	uid: this.$store.state.user.userInfo.uid,
447	})	461	})
448	},	462	},
449	goPerchase () {	463	goPerchase () {
450	// switch (this.updateGoodType) {	464	// switch (this.updateGoodType) {
451	// case '1':	465	// case '1':
452	console.log('goPerchase')	466	console.log('goPerchase')
453	uni.navigateTo({	467	uni.navigateTo({
454	url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,	468	url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
455	success: res => {},	469	success: res => {},
456	fail: (error) => { console.log('跳转参数选择失败======>', error) },	470	fail: (error) => { console.log('跳转参数选择失败======>', error) },
457	complete: () => { console.log('goPerchase') },	471	complete: () => { console.log('goPerchase') },
458	})	472	})
459	// break	473	// break
460	// case '2':	474	// case '2':
461	// uni.navigateTo({	475	// uni.navigateTo({
462	// url: '../detailStandard/detailStandard_k',	476	// url: '../detailStandard/detailStandard_k',
463	// success: res => {},	477	// success: res => {},
464	// fail: () => {},	478	// fail: () => {},
465	// complete: () => {}	479	// complete: () => {}
466	// })	480	// })
467	// break	481	// break
468	// case '3':	482	// case '3':
469	// uni.navigateTo({	483	// uni.navigateTo({
470	// url: '../purchaseLenses/purchaseLenses',	484	// url: '../purchaseLenses/purchaseLenses',
471	// success: res => {},	485	// success: res => {},
472	// fail: () => {},	486	// fail: () => {},
473	// complete: () => {}	487	// complete: () => {}
474	// })	488	// })
475	// break	489	// break
476	// case '4':	490	// case '4':
477	// uni.navigateTo({	491	// uni.navigateTo({
478	// url: '../detailStandard/detailStandard_sun',	492	// url: '../detailStandard/detailStandard_sun',
479	// success: res => {},	493	// success: res => {},
480	// fail: () => {},	494	// fail: () => {},
481	// complete: () => {}	495	// complete: () => {}
482	// })	496	// })
483	// break	497	// break
484	// default :	498	// default :
485	// break	499	// break
486	// }	500	// }
487	},	501	},
488	// 加入购物车	502	// 加入购物车
489	// addCart () {	503	// addCart () {
490	// store.dispatch('cart/addCart', {	504	// store.dispatch('cart/addCart', {
491	// uid: this.$store.state.user.userInfo.uid,	505	// uid: this.$store.state.user.userInfo.uid,
492	// openid: this.$store.state.user.userInfo.openid,	506	// openid: this.$store.state.user.userInfo.openid,
493	// pid: this.pid,	507	// pid: this.pid,
494	// checkedSKU: {},	508	// checkedSKU: {},
495	// })	509	// })
496	// store.dispatch('cart/getCartList', {	510	// store.dispatch('cart/getCartList', {
497	// uid: this.$store.state.user.userInfo.uid, // 用户id	511	// uid: this.$store.state.user.userInfo.uid, // 用户id
498	// })	512	// })
499	// },	513	// },
500	tabChange (e) {	514	tabChange (e) {
501	if (this.current !== e) {	515	if (this.current !== e) {
502	this.current = e	516	this.current = e
503	}	517	}
504	},	518	},
505	},	519	},
506	}	520	}
507	</script>	521	</script>
508	<style lang='scss'>	522	<style lang='scss'>
509	.container {	523	.container {
510	background-color: #f8f8f8;	524	background-color: #f8f8f8;
511	}	525	}
512	.D1,	526	.D1,
513	.D2,	527	.D2,
514	.D3,	528	.D3,
515	.D4,	529	.D4,
516	.D6 {	530	.D6 {
517	background: #ffffff;	531	background: #ffffff;
518	margin-bottom: 10px;	532	margin-bottom: 10px;
519	padding: 8px 20px 8px 20px;	533	padding: 8px 20px 8px 20px;
520	box-sizing: border-box;	534	box-sizing: border-box;
521	.swiperImage {	535	.swiperImage {
522	width: 684rpx;	536	width: 684rpx;
523	height: 480rpx;	537	height: 480rpx;
524	image {	538	image {
525	max-width: 100%;	539	max-width: 100%;
526	max-height: 100%;	540	max-height: 100%;
527	border-radius: 16rpx;	541	border-radius: 16rpx;
528	}	542	}
529	}	543	}
530	}	544	}
531	.D5 {	545	.D5 {
532	background: #ffffff;	546	background: #ffffff;
533	padding: 8px 20px 8px 20px;	547	padding: 8px 20px 8px 20px;
534	box-sizing: border-box;	548	box-sizing: border-box;
535	}	549	}
536	.swiperImage {	550	.swiperImage {
537	width: 100%;	551	width: 100%;
538	height: 560rpx;	552	height: 560rpx;
539	.swiper-item {	553	.swiper-item {
540	width: 100%;	554	width: 100%;
541	image {	555	image {
542	width: 100%;	556	width: 100%;
543	}	557	}
544	}	558	}
545	}	559	}
546	.D1 {	560	.D1 {
547	.D1_price {	561	.D1_price {
548	color: #eb5d3b;	562	color: #eb5d3b;
549	font-size: 18px;	563	font-size: 18px;
550	margin-top: 5px;	564	margin-top: 5px;
551	font-family: "PingFangSC-Semibold";	565	font-family: "PingFangSC-Semibold";
552	display: flex;	566	display: flex;
553	justify-content: space-between;	567	justify-content: space-between;
554	.D1_number {	568	.D1_number {
555	color: #999999;	569	color: #999999;
556	font-size: 14px;	570	font-size: 14px;
557	font-family: "PingFangSC-Regular";	571	font-family: "PingFangSC-Regular";
558	}	572	}
559	}	573	}
560	.D1_name {	574	.D1_name {
561	font-size: 16px;	575	font-size: 16px;
562	font-family: "PingFangSC-Semibold";	576	font-family: "PingFangSC-Semibold";
563	margin-top: 5px;	577	margin-top: 5px;
564	.D1_name1 {	578	.D1_name1 {
565	font-weight: bold;	579	font-weight: bold;
566	font-size: 16px;	580	font-size: 16px;
567	color: #333333;	581	color: #333333;
568	}	582	}
569	}	583	}
570	.D1_spans {	584	.D1_spans {
571	font-size: 10px;	585	font-size: 10px;
572	color: #999999;	586	color: #999999;
573	margin-top: 5px;	587	margin-top: 5px;
574	span {	588	span {
575	height: 14px;	589	height: 14px;
576	margin-right: 10px;	590	margin-right: 10px;
577	}	591	}
578	}	592	}
579	}	593	}
580	.D2 {	594	.D2 {
581	font-size: 14px;	595	font-size: 14px;
582	font-family: "PingFangSC-Regular";	596	font-family: "PingFangSC-Regular";
583	view {	597	view {
584	height: 24px;	598	height: 24px;
585	}	599	}
586	.D2_span1 {	600	.D2_span1 {
587	color: #999999;	601	color: #999999;
588	}	602	}
589	.D2_span2 {	603	.D2_span2 {
590	color: #333333;	604	color: #333333;
591	}	605	}
592	}	606	}
593	.D3 {	607	.D3 {
594	.screenBar {	608	.screenBar {
595	width: 670rpx;	609	width: 670rpx;
596	margin-top: 20rpx;	610	margin-top: 20rpx;
597	margin-bottom: 24rpx;	611	margin-bottom: 24rpx;
598	display: flex;	612	display: flex;
599	flex-direction: row;	613	flex-direction: row;
600	justify-content: space-between;	614	justify-content: space-between;
601	align-items: center;	615	align-items: center;
602	font-size: 14px;	616	font-size: 14px;
603	color: #333333;	617	color: #333333;
604	transition: all 0.2s;	618	transition: all 0.2s;
605	}	619	}
606	.screen-item {	620	.screen-item {
607	font-size: 32rpx;	621	font-size: 32rpx;
608	color: #333333;	622	color: #333333;
609	display: flex;	623	display: flex;
610	transition: all 0.2s;	624	transition: all 0.2s;
611	.D3_list {	625	.D3_list {
612	margin-bottom: 4px;	626	margin-bottom: 4px;
613	}	627	}
614	.D3_list view {	628	.D3_list view {
615	display: flex;	629	display: flex;
616	align-content: center;	630	align-content: center;
617	font-size: 14px;	631	font-size: 14px;
618	color: #333333;	632	color: #333333;
619	}	633	}
620	.D3_list image {	634	.D3_list image {
621	width: 50px;	635	width: 50px;
622	height: 25px;	636	height: 25px;
623	margin-right: 6px;	637	margin-right: 6px;
624	}	638	}
625	.D3_list span {	639	.D3_list span {
626	margin-left: 6px;	640	margin-left: 6px;
627	margin-right: 5px;	641	margin-right: 5px;
628	font-family: "PingFangSC-Regular";	642	font-family: "PingFangSC-Regular";
629	}	643	}
630	}	644	}
631	.active {	645	.active {
632	border-bottom: 4rpx solid #ff6b4a;	646	border-bottom: 4rpx solid #ff6b4a;
633	}	647	}
634	.customerService {	648	.customerService {
635	margin-bottom: 90rpx;	649	margin-bottom: 90rpx;
636	.serviceItem {	650	.serviceItem {
637	margin-bottom: 32rpx;	651	margin-bottom: 32rpx;
638	.title {	652	.title {
639	display: flex;	653	display: flex;
640	flex-direction: row;	654	flex-direction: row;
641	align-items: center;	655	align-items: center;
642	.titleText {	656	.titleText {
643	font-size: 14px;	657	font-size: 14px;
644	color: #333333;	658	color: #333333;
645	margin-bottom: 12rpx;	659	margin-bottom: 12rpx;
646	}	660	}
647	}	661	}
648	.itemContent {	662	.itemContent {
649	font-size: 14px;	663	font-size: 14px;
650	color: #999999;	664	color: #999999;
651	margin-left: 18rpx;	665	margin-left: 18rpx;
652	}	666	}
653	}	667	}
654	.serviceItem2 {	668	.serviceItem2 {
655	margin-left: 18rpx;	669	margin-left: 18rpx;
656	margin-bottom: 32rpx;	670	margin-bottom: 32rpx;
657	.titleText {	671	.titleText {
658	font-size: 14px;	672	font-size: 14px;
659	color: #ff6b4a;	673	color: #ff6b4a;
660	}	674	}
661	.itemContent {	675	.itemContent {
662	font-size: 14px;	676	font-size: 14px;
663	color: #999999;	677	color: #999999;
664	.itemContent-child {	678	.itemContent-child {
665	margin-bottom: 40rpx;	679	margin-bottom: 40rpx;
666	.contentTitle {	680	.contentTitle {
667	border-bottom: 1px solid #ff6b4a;	681	border-bottom: 1px solid #ff6b4a;
668	}	682	}
669	}	683	}
670	}	684	}
671	}	685	}
672	}	686	}
673	}	687	}
674	.D4 {	688	.D4 {
675	.D4_esvalue {	689	.D4_esvalue {
676	font-size: 14px;	690	font-size: 14px;
677	color: #333333;	691	color: #333333;
678	display: flex;	692	display: flex;
679	justify-content: space-between;	693	justify-content: space-between;
680	margin-bottom: 10px;	694	margin-bottom: 10px;
681	.D4_2 {	695	.D4_2 {
682	width: 90px;	696	width: 90px;
683	display: flex;	697	display: flex;
684	align-items: center;	698	align-items: center;
685	justify-content: space-between;	699	justify-content: space-between;
686	}	700	}
687	}	701	}
688	.D4_esvalue view {	702	.D4_esvalue view {
689	font-size: 14px;	703	font-size: 14px;
690	color: #333333;	704	color: #333333;
691	font-weight: bold;	705	font-weight: bold;
692	}	706	}
693	.D4_list{	707	.D4_list{
694	display: grid;	708	display: grid;
695	grid-row-gap: 10px;	709	grid-row-gap: 10px;
696	grid-column-gap: 4px;	710	grid-column-gap: 4px;
697	}	711	}
698	.D4_list view {	712	.D4_list view {
699	display: flex;	713	display: flex;
700	justify-content: center;	714	justify-content: center;
701	align-items: center;	715	align-items: center;
702	font-size: 12px;	716	font-size: 12px;
703	width: 118px;	717	width: 118px;
704	height: 24px;	718	height: 24px;
705	border-radius: 2px;	719	border-radius: 2px;
706	background: #f2f2f2;	720	background: #f2f2f2;
707	color: #666666;	721	color: #666666;
708	// letter-spacing: 1px;	722	// letter-spacing: 1px;
709	}	723	}
710	}	724	}
711	.D5 {	725	.D5 {
712	.D5_fixed1 {	726	.D5_fixed1 {
713	display: flex;	727	display: flex;
714	justify-content: space-between;	728	justify-content: space-between;
715	align-content: center;	729	align-content: center;
716	margin-bottom: 12px;	730	margin-bottom: 12px;
717	view {	731	view {
718	font-size: 14px;	732	font-size: 14px;
719	color: #333333;	733	color: #333333;
720	font-weight: bold;	734	font-weight: bold;
721	font-family: "PingFangSC-Medium";	735	font-family: "PingFangSC-Medium";
722	line-height: 24px;	736	line-height: 24px;
723	}	737	}
724	image {	738	image {
725	width: 240rpx;	739	width: 240rpx;
726	height: 3px;	740	height: 3px;
727	margin-top: 10px;	741	margin-top: 10px;
728	}	742	}
729	}	743	}
730	.D5_all {	744	.D5_all {
731	width: 100%;	745	width: 100%;
732	margin-top: 30rpx;	746	margin-top: 30rpx;
733	margin-right: 30rpx;	747	margin-right: 30rpx;
734	margin-bottom: 180rpx;	748	margin-bottom: 180rpx;
735	font-family: "PingFangSC-Regular";	749	font-family: "PingFangSC-Regular";
736	// border: #999999 solid 1.5px;	750	// border: #999999 solid 1.5px;
737	}	751	}
738	}	752	}
739	.D6 {	753	.D6 {
740	width: 100%;	754	width: 100%;
741	height: 430px;	755	height: 430px;
742	background: #f9f6ed;	756	background: #f9f6ed;
743	margin-bottom: 74px;	757	margin-bottom: 74px;
744	view {	758	view {
745	text-align: center;	759	text-align: center;
746	}	760	}
747	.D6_v1 {	761	.D6_v1 {
748	font-weight: bold;	762	font-weight: bold;
749	}	763	}
750	.D6_v2 {	764	.D6_v2 {
751	font-size: 14px;	765	font-size: 14px;
752	margin-bottom: 30px;	766	margin-bottom: 30px;
753	}	767	}
754	.D6_v5 {	768	.D6_v5 {
755	.D6_v5_s1 {	769	.D6_v5_s1 {
756	font-weight: bold;	770	font-weight: bold;
757	}	771	}
758	.D6_v5_s2 {	772	.D6_v5_s2 {
759	font-size: 14px;	773	font-size: 14px;
760	}	774	}
761	}	775	}
762	}	776	}
763	.botton {	777	.botton {
764	position: fixed;	778	position: fixed;
765	bottom: 0;	779	bottom: 0;
766	height: 74px;	780	height: 74px;
767	width: 100%;	781	width: 100%;
768	background: #ffffff;	782	background: #ffffff;
769	padding: 20px 20px 8px 20px;	783	padding: 20px 20px 8px 20px;
770	font-family: "PingFangSC-Regular";	784	font-family: "PingFangSC-Regular";
771	box-sizing: border-box;	785	box-sizing: border-box;
772	display: flex;	786	display: flex;
773	justify-content: space-between;	787	justify-content: space-between;
774	align-content: center;	788	align-content: center;
775	.botton_1 {	789	.botton_1 {
776	width: 20%;	790	width: 20%;
777	height: 100%;	791	height: 100%;
778	text-align: center;	792	text-align: center;
779	color: #989898;	793	color: #989898;
780	.cart_icon {	794	.cart_icon {
781	position: relative;	795	position: relative;
782	image {	796	image {
783		797
784	}	798	}
785	text {	799	text {
786	position: absolute;	800	position: absolute;
787	color: white;	801	color: white;
788	font-size: 17px;	802	font-size: 17px;
789	background-color: red;	803	background-color: red;
790	min-height: 24px;	804	min-height: 24px;
791	min-width:24px;	805	min-width:24px;
792	line-height: 24px;	806	line-height: 24px;
793	right: -12%;	807	right: -12%;
794	top: -12px;	808	top: -12px;
795	text-align: center;	809	text-align: center;
796	border-radius: 24px;	810	border-radius: 24px;
797	padding:2px;	811	padding:2px;
798	}	812	}
799	}	813	}
800	}	814	}
801	image {	815	image {
802	width: 60%;	816	width: 42%;
803	height: 30px;	817	height: 26px;
804	}	818	}
805	.botton_image {	819	.botton_image {
806	font-size: 12px;	820	font-size: 12px;
807	text-align: center;	821	text-align: center;
808	}	822	}
809	.botton_2 {	823	.botton_2 {
810	width: 74%;	824	width: 74%;
811	height: 86%;	825	height: 86%;
812	display: grid;	826	display: grid;
813	grid-template-columns: 50% 50%;	827	grid-template-columns: 50% 50%;
814	}	828	}
815	.botton_input {	829	.botton_input {
816	display: inline-flex;	830	display: inline-flex;
817	align-items: center;	831	align-items: center;
818	justify-content: space-around;	832	justify-content: space-around;
819	background: #fff0ec;	833	background: #fff0ec;
820	font-size: 16px;	834	font-size: 16px;
821	color: #ff6b4a;	835	color: #ff6b4a;
822	border-radius: 20px 0 0 20px;	836	border-radius: 20px 0 0 20px;
823	}	837	}
824	.botton_now {	838	.botton_now {
825	display: inline-flex;	839	display: inline-flex;
826	align-items: center;	840	align-items: center;
827	justify-content: space-around;	841	justify-content: space-around;
828	background: #ff6b4a;	842	background: #ff6b4a;
829	font-size: 16px;	843	font-size: 16px;
830	color: #ffffff;	844	color: #ffffff;
831	border-radius: 0 20px 20px 0;	845	border-radius: 0 20px 20px 0;
832	}	846	}
833	}	847	}
		848	/* 隐藏滚动条 */
		849	::-webkit-scrollbar {
		850	width: 0;
		851	height: 0;
		852	color: transparent;
		853	}
834	</style>	854	</style>
835		855

src/pages/myOrder/components/OrderCard.vue

Diff comments View file @607bc3a

1	<template>	1	<template>
2	<view>	2	<view>
3	<view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">	3	<view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)">
4	<view class="cardHeader">	4	<view class="cardHeader">
5	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.mch_id}}</text>	5	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.mch_id}}</text>
6	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>	6	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>
7	<text class="orderType" v-if="status=='0'">待付款</text>	7	<text class="orderType" v-if="status=='0'">待付款</text>
8	<text class="orderType" v-if="status=='1'">待收货</text>	8	<text class="orderType" v-if="status=='1'">待收货</text>
9	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>	9	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>
10	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	10	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
11	</view>	11	</view>
12	<view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index">	12	<view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index">
13	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>	13	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
14	<view class="infoText">	14	<view class="infoText">
15	<view class="orderName">{{orderInfo[0].p_name}}</view>	15	<view class="orderName">{{orderInfo[0].p_name}}</view>
16	<view class="orderDescrib">{{orderInfo.p_name}}</view>	16	<view class="orderDescrib">{{orderInfo.p_name}}</view>
17	<view class="infoText-bottom">	17	<view class="infoText-bottom">
18	<view class="markPrice">{{orderInfo.nowPrice}}</view>	18	<view class="markPrice">{{orderInfo.nowPrice}}</view>
19	<view class="buy-num">X {{orderInfo.num}}</view>	19	<view class="buy-num">X {{orderInfo.num}}</view>
20	</view>	20	</view>
21	</view>	21	</view>
22	</view>	22	</view>
23	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	23	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
24	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->	24	<!-- 0待付款 1 已付款待收货 2 已收货待评价 3 已评价 -->
25	<view class="btns" v-if="status == '0'">	25	<view class="btns" v-if="status == '0'">
26	<view class="btn-type1" >取消订单</view>	26	<view class="btn-type1" >取消订单</view>
27	<view class="btn-type2">去支付</view>	27	<view class="btn-type2">去支付</view>
28	</view>	28	</view>
29	<view class="btns" v-if="status == '1'">	29	<view class="btns" v-if="status == '1'">
30	<view class="btn-type2">确认收货</view>	30	<view class="btn-type2">确认收货</view>
31	</view>	31	</view>
32	<view class="btns" v-if="status == '2'">	32	<view class="btns" v-if="status == '2'">
33	<view class="btn-type2">再次购买</view>	33	<view class="btn-type2">再次购买</view>
34	</view>	34	</view>
35	<!-- <view class="btns" v-if="status == '3'">	35	<!-- <view class="btns" v-if="status == '3'">
36	<view class="btn-type2">再次购买</view>	36	<view class="btn-type2">再次购买</view>
37	</view> -->	37	</view> -->
38	</view>	38	</view>
39	<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">	39	<view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)">
40	<view class="cardHeader">	40	<view class="cardHeader">
41	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.mch_id}}</text>	41	<text class="orderId" v-if="status == '0'\|\|status == '1'">订单号：{{order.mch_id}}</text>
42	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>	42	<text class="orderId" v-if="status == '2'\|\|status == '3'">下单时间：{{order.pay_time}}</text>
43	<text class="orderType" v-if="status=='0'">待付款</text>	43	<text class="orderType" v-if="status=='0'">待付款</text>
44	<text class="orderType" v-if="status=='1'">待收货</text>	44	<text class="orderType" v-if="status=='1'">待收货</text>
45	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>	45	<text class="orderType" v-if="status == '2'\|\|status == '3'">已完成</text>
46	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->	46	<!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
47	</view>	47	</view>
48	<view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">	48	<view class="orderCardInfo" v-for="(orderInfo) in orderInfoList.list" :key="orderInfo">
49	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>	49	<image :src="orderInfo.imgUrl" mode="aspectFill"></image>
50	<view class="infoText">	50	<view class="infoText">
51	<view class="orderName">{{orderInfo.p_name}}</view>	51	<view class="orderName">{{orderInfo.p_name}}</view>
52	<view class="orderDescrib">{{orderInfo.p_name}}</view>	52	<view class="orderDescrib">{{orderInfo.p_name}}</view>
53	<view class="infoText-bottom">	53	<view class="infoText-bottom">
54	<view class="markPrice">{{orderInfo.nowPrice}}</view>	54	<view class="markPrice">{{orderInfo.nowPrice}}</view>
55	<view class="buy-num">X {{orderInfo.num}}</view>	55	<view class="buy-num">X {{orderInfo.num}}</view>
56	</view>	56	</view>
57	</view>	57	</view>
58	</view>	58	</view>
59	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>	59	<view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
60	<view class="btns" v-if="status == '0'">	60	<view class="btns" v-if="status == '0'">
61	<view class="btn-type1" >取消订单</view>	61	<view class="btn-type1" >取消订单</view>
62	<view class="btn-type2">去支付</view>	62	<view class="btn-type2">去支付</view>
63	</view>	63	</view>
64	<view class="btns" v-if="status == '1'">	64	<view class="btns" v-if="status == '1'">
65	<view class="btn-type2">确认收货</view>	65	<view class="btn-type2">确认收货</view>
66	</view>	66	</view>
67	<view class="btns" v-if="status == '2'">	67	<view class="btns" v-if="status == '2'\|\|status == '3'">
68	<view class="btn-type2">再次购买</view>	68	<view class="btn-type2">再次购买</view>
69	</view>	69	</view>
70	<!-- <view class="btns" v-if="status == '3'">	70	<!-- <view class="btns" v-if="status == '3'">
71	<view class="btn-type2">再次购买</view>	71	<view class="btn-type2">再次购买</view>
72	</view> -->	72	</view> -->
73	</view>	73	</view>
74	</view>	74	</view>
75	</template>	75	</template>
76		76
77	<script>	77	<script>
78	export default {	78	export default {
79	props: {	79	props: {
80	/**	80	/**
81	* 订单数据	81	* 订单数据
82	*/	82	*/
83	order: {	83	order: {
84	// orderId: Number,	84	// orderId: Number,
85	// img: String,	85	// img: String,
86	// name: String,	86	// name: String,
87	// originCost:String,	87	// originCost:String,
88	// price: String,	88	// price: String,
89	// orderType:Number,	89	// orderType:Number,
90	// buyNum:Number,	90	// buyNum:Number,
91	finished_time: null,	91	finished_time: null,
92	is_refound: String,	92	is_refound: String,
93	mch_id: String,	93	mch_id: String,
94	money_of_dcw: String,	94	money_of_dcw: String,
95	money_of_partner: String,	95	money_of_partner: String,
96	money_of_shop: String,	96	money_of_shop: String,
97	orderJudge: Boolean,	97	orderJudge: Boolean,
98	order_info: {	98	order_info: {
99	address:{	99	address:{
100	cityName: String,	100	cityName: String,
101	countyName: String,	101	countyName: String,
102	detailInfo: String,	102	detailInfo: String,
103	errMsg: String,	103	errMsg: String,
104	nationalCode: String,	104	nationalCode: String,
105	postalCode: String,	105	postalCode: String,
106	provinceName: String,	106	provinceName: String,
107	telNumber: String,	107	telNumber: String,
108	userName: String,	108	userName: String,
109	},	109	},
110	cartinfo: ["127"],	110	cartinfo: ["127"],
111	keyname: "330_1588911391",	111	keyname: "330_1588911391",
112	lefttime: Number,	112	lefttime: Number,
113	list:[	113	list:[
114	{	114	{
115	cart_id: "127",	115	cart_id: "127",
116	imgUrl: String,	116	imgUrl: String,
117	img_index_url: null,	117	img_index_url: null,
118	memo: String,	118	memo: String,
119	mp_id: String,	119	mp_id: String,
120	nowPrice: String,	120	nowPrice: String,
121	num: String,	121	num: String,
122	oldPrice: Number,	122	oldPrice: Number,
123	p_discount: String,	123	p_discount: String,
124	p_name: String,	124	p_name: String,
125	p_root_index: String,	125	p_root_index: String,
126	p_sale_price: String,	126	p_sale_price: String,
127	peopleName: String,	127	peopleName: String,
128	pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],	128	pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"],
129	pid: String,	129	pid: String,
130	sk_id: String,	130	sk_id: String,
131	}	131	}
132	],	132	],
133	orderDesc: String,	133	orderDesc: String,
134	total_fee: Number,	134	total_fee: Number,
135	},	135	},
136	partner_uid: String,	136	partner_uid: String,
137	pay_cate: String,	137	pay_cate: String,
138	pay_id: String,	138	pay_id: String,
139	pay_time: String,	139	pay_time: String,
140	pay_wood_desc: String,	140	pay_wood_desc: String,
141	pay_wood_id: String,	141	pay_wood_id: String,
142	prepay_id: String,	142	prepay_id: String,
143	re_check_staus: String,	143	re_check_staus: String,
144	shopid: String,	144	shopid: String,
145	split_userid: String,	145	split_userid: String,
146	status: String,	146	status: String,
147	// status0待付款 1已付款待收货 2 已收货待评价 3 已评价	147	// status0待付款 1已付款待收货 2 已收货待评价 3 已评价
148	total_fee: String,	148	total_fee: String,
149	uid: String,	149	uid: String,
150	},	150	},
151	/**	151	/**
152	* 当前选择	152	* 当前选择
153	*/	153	*/
154	current:Number	154	current:Number
155		155
156	},	156	},
157	created() {	157	created() {
158	console.log(this.order);	158	console.log(this.order);
159	// console.log(this.order.status );	159	// console.log(this.order.status );
160	// console.log(this.current);	160	// console.log(this.current);
161	},	161	},
162	computed:{	162	computed:{
163	status(){	163	status(){
164	return this.order.status	164	return this.order.status
165	},	165	},
166	orderInfoList(){	166	orderInfoList(){
167	console.log('this.order.order_info[0]', this.order)	167	console.log('this.order.order_info', this.order)
168	return this.order.order_info[0]	168	return this.order.order_info
169	}	169	}
170	},	170	},
171	data() {	171	data() {
172	return {	172	return {
173	};	173	};
174	},	174	},
175	methods:{	175	methods:{
176	toRefundment(){	176	toRefundment(){
177	uni.navigateTo({	177	uni.navigateTo({
178	url: '../refundment/refundment',	178	url: '../refundment/refundment',
179	success: res => {},	179	success: res => {},
180	fail: () => {},	180	fail: () => {},
181	complete: () => {}	181	complete: () => {}
182	});	182	});
183	},	183	},
184	toOrderInfo(status,payId){	184	toOrderInfo(status,payId){
185	console.log(status,payId)	185	console.log(status,payId)
186	switch(status){	186	switch(status){
187	// 0待付款 1待收货 2已收货 3 已评价	187	// 0待付款 1待收货 2已收货 3 已评价
188	case '0':	188	case '0':
189	uni.navigateTo({	189	uni.navigateTo({
190	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	190	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
191	fail(errMsg) {	191	fail(errMsg) {
192	console.log(errMsg)	192	console.log(errMsg)
193	}	193	}
194	})	194	})
195	break;	195	break;
196	case '1':	196	case '1':
197	uni.navigateTo({	197	uni.navigateTo({
198	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	198	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
199	fail(errMsg) {	199	fail(errMsg) {
200	console.log(errMsg)	200	console.log(errMsg)
201	}	201	}
202	})	202	})
203		203
204	break;	204	break;
205	case '2 \|\| 3':	205	case '2 \|\| 3':
206	uni.navigateTo({	206	uni.navigateTo({
207	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,	207	url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId,
208	fail(errMsg) {	208	fail(errMsg) {
209	console.log(errMsg)	209	console.log(errMsg)
210	}	210	}
211	})	211	})
212	break;	212	break;
213	default:	213	default:
214	break;	214	break;
215		215
216	}	216	}
217	}	217	}
218	}	218	}
219	}	219	}
220	</script>	220	</script>
221		221
222	<style lang="scss">	222	<style lang="scss">
223	.card{	223	.card{
224	width: 670rpx;	224	width: 670rpx;
225	height: 478rpx;	225	height: 478rpx;
226	background: #FFFFFF;	226	background: #FFFFFF;
227	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);	227	box-shadow: 0 0 10px 0 rgba(177,128,128,0.06);
228	border-radius: 8px;	228	border-radius: 8px;
229	border-radius: 8px;	229	border-radius: 8px;
230	margin-top: 20rpx;	230	margin-top: 20rpx;
231	padding: 40rpx;	231	padding: 40rpx;
232	box-sizing: border-box;	232	box-sizing: border-box;
233	.cardHeader{	233	.cardHeader{
234	width: 100%;	234	width: 100%;
235	height: 40rpx;	235	height: 40rpx;
236	display: flex;	236	display: flex;
237	justify-content: space-between;	237	justify-content: space-between;
238	align-items: center;	238	align-items: center;
239	.orderId{	239	.orderId{
240	font-size: 12px;	240	font-size: 12px;
241	color: #999999;	241	color: #999999;
242	}	242	}
243	.orderType{	243	.orderType{
244	font-size: 14px;	244	font-size: 14px;
245	color: #FF6B4A;	245	color: #FF6B4A;
246	}	246	}
247	}	247	}
248	.orderCardInfo{	248	.orderCardInfo{
249	width: 100%;	249	width: 100%;
250	height: 188rpx;	250	height: 188rpx;
251	display: flex;	251	display: flex;
252	flex-direction: row;	252	flex-direction: row;
253	justify-content: space-between;	253	justify-content: space-between;
254	align-items: center;	254	align-items: center;
255	margin-top: 40rpx;	255	margin-top: 40rpx;
256	image{	256	image{
257	height: 188rpx;	257	height: 188rpx;
258	width: 188rpx;	258	width: 188rpx;
259	margin-right: 24rpx;	259	margin-right: 24rpx;
260	}	260	}
261	.infoText{	261	.infoText{
262	display: flex;	262	display: flex;
263	flex-direction: column;	263	flex-direction: column;
264	justify-content: space-between;	264	justify-content: space-between;
265	align-items: flex-start;	265	align-items: flex-start;
266	height: 188rpx;	266	height: 188rpx;
267	width: 368rpx;	267	width: 368rpx;
268	}	268	}
269	.orderName{	269	.orderName{
270	font-size: 14px;	270	font-size: 14px;
271	color: #333333;	271	color: #333333;
272	display: -webkit-box;	272	display: -webkit-box;
273	overflow: hidden;	273	overflow: hidden;
274	-webkit-box-orient: vertical;	274	-webkit-box-orient: vertical;
275	-webkit-line-clamp: 2;	275	-webkit-line-clamp: 2;
276	}	276	}
277	.orderDescrib{	277	.orderDescrib{
278	font-size: 12px;	278	font-size: 12px;
279	color: #999999;	279	color: #999999;
280	display: -webkit-box;	280	display: -webkit-box;
281	overflow: hidden;	281	overflow: hidden;
282	-webkit-box-orient: vertical;	282	-webkit-box-orient: vertical;
283	-webkit-line-clamp: 2;	283	-webkit-line-clamp: 2;
284	}	284	}
285	.infoText-bottom{	285	.infoText-bottom{
286	display: flex;	286	display: flex;
287	flex-direction: row;	287	flex-direction: row;
288	justify-content: flex-start;	288	justify-content: flex-start;
289	align-items: center;	289	align-items: center;
290	width: 100%;	290	width: 100%;
291	.markPrice{	291	.markPrice{
292	font-size: 14px;	292	font-size: 14px;
293	color: #FF6B4A;	293	color: #FF6B4A;
294	margin-right: 20rpx;	294	margin-right: 20rpx;
295	}	295	}
296	.buy-num{	296	.buy-num{
297	font-size: 12px;	297	font-size: 12px;
298	color: #999999;	298	color: #999999;
299	}	299	}
300	}	300	}
301	}	301	}
302	.payPrice{	302	.payPrice{
303	text-align: right;	303	text-align: right;
304	margin: 20rpx 0;	304	margin: 20rpx 0;
305	font-size: 14px;	305	font-size: 14px;
306	color: #333333;	306	color: #333333;
307	.priceNum{	307	.priceNum{
308	font-size: 14px;	308	font-size: 14px;
309	color: #FF6B4A;	309	color: #FF6B4A;
310	}	310	}
311	}	311	}
312	.btns{	312	.btns{
313	display: flex;	313	display: flex;
314	justify-content: flex-end;	314	justify-content: flex-end;
315	align-items: center;	315	align-items: center;
316	.btn-type1{	316	.btn-type1{
317	height: 48rpx;	317	height: 48rpx;
318	width: 156rpx;	318	width: 156rpx;
319	border: 1px solid #FF6B4A;	319	border: 1px solid #FF6B4A;
320	border-radius: 12px;	320	border-radius: 12px;
321	border-radius: 12px;	321	border-radius: 12px;
322	text-align: center;	322	text-align: center;
323	line-height: 48rpx;	323	line-height: 48rpx;
324	font-size: 12px;	324	font-size: 12px;
325	color: #FF6B4A;	325	color: #FF6B4A;
326	}	326	}
327	.btn-type2{	327	.btn-type2{
328	height: 48rpx;	328	height: 48rpx;
329	width: 140rpx;	329	width: 140rpx;
330	background: #FF6B4A;	330	background: #FF6B4A;
331	border-radius: 12px;	331	border-radius: 12px;
332	border-radius: 12px;	332	border-radius: 12px;
333	text-align: center;	333	text-align: center;
334	line-height: 48rpx;	334	line-height: 48rpx;
335	font-size: 12px;	335	font-size: 12px;
336	color: #FFFFFF;	336	color: #FFFFFF;
337	margin-left: 20rpx;	337	margin-left: 20rpx;
338	}	338	}
339	}	339	}
340	}	340	}
341	</style>	341	</style>
342		342

src/pages/myOrder/myOrder.vue

Diff comments View file @607bc3a

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<!-- <view class="searchBar">	5	<!-- <view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>	7	<input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/>
8	</view> -->	8	</view> -->
9	<view class="screenBar">	9	<view class="screenBar">
10	<view	10	<view
11	v-for="item in screenItems"	11	v-for="item in screenItems"
12	:key="item.current"	12	:key="item.current"
13	@click="onClickItem(item.current)"	13	@click="onClickItem(item.current)"
14	>	14	>
15	<view	15	<view
16	class="screenItem"	16	class="screenItem"
17	v-bind:class="{ active: current === item.current }"	17	v-bind:class="{ active: current === item.current }"
18	>{{ item.text }}</view>	18	>{{ item.text }}</view>
19	</view>	19	</view>
20	</view>	20	</view>
21	</view>	21	</view>
22	<view class="orderList">	22	<view class="orderList">
23	<view	23	<view
24	v-for="(order) in orderList"	24	v-for="(order) in orderList"
25	:key="order.orderId"	25	:key="order.orderId"
26	>	26	>
27	<OrderCard	27	<OrderCard
28	:order="order"	28	:order="order"
29	:current="current"	29	:current="current"
30	></OrderCard>	30	></OrderCard>
31	</view>	31	</view>
32	</view>	32	</view>
33	<view class="footer">没有更多订单了，去商城看看吧~</view>	33	<view class="footer">没有更多订单了，去商城看看吧~</view>
34	</view>	34	</view>
35	</template>	35	</template>
36	<script>	36	<script>
37	import OrderCard from './components/OrderCard.vue'	37	import OrderCard from './components/OrderCard.vue'
38	import store from '@/store'	38	import store from '@/store'
39		39
40	export default {	40	export default {
41	components: {	41	components: {
42	OrderCard: OrderCard,	42	OrderCard: OrderCard,
43	},	43	},
44	data() {	44	data() {
45	return {	45	return {
46	// 顶部筛选项	46	// 顶部筛选项
47	screenItems: [	47	screenItems: [
48	{ current: '10', text: '全部' },	48	{ current: '10', text: '全部' },
49	{ current: '0', text: '待付款' },	49	{ current: '0', text: '待付款' },
50	{ current: '1', text: '待收货' },	50	{ current: '1', text: '待收货' },
51	{ current: '2', text: '已完成' },	51	{ current: '2', text: '已完成' },
52	// {current:"3",text:'已评价'},	52	// {current:"3",text:'已评价'},
53	// {current:"4",text:'退款'},	53	// {current:"4",text:'退款'},
54	],	54	],
55	// 当前所在item 默认10-->全部	55	// 当前所在item 默认10-->全部
56	current: '10',	56	current: '10',
57	}	57	}
58	},	58	},
59		59
60	onLoad: function(option) {	60	onLoad: function(option) {
61	// 获取订单列表	61	// 获取订单列表
62	store.dispatch('myOrder/getList', {	62	store.dispatch('myOrder/getList', {
63	way: '',	63	way: '',
64	})	64	})
65	// 从user过来传的status，给current，以显示对应item	65	// 从user过来传的status，给current，以显示对应item
66	this.current = option.status	66	this.current = option.status
67	},	67	},
68	computed: {	68	computed: {
69	orderList() {	69	orderList() {
70	// console.log('orderList', this.$store.state.myOrder.orderList);	70	console.log('orderList', this.$store.state.myOrder.orderList);
71	return this.$store.state.myOrder.orderList	71	return this.$store.state.myOrder.orderList
72	},	72	},
73	},	73	},
74	methods: {	74	methods: {
75	// tab点击事件	75	// tab点击事件
76	onClickItem(e) {	76	onClickItem(e) {
77	if (this.current !== e) {	77	if (this.current !== e) {
78	this.current = e	78	this.current = e
79	}	79	}
80	},	80	},
81		81
82	},	82	},
83	}	83	}
84	</script>	84	</script>
85		85
86	<style lang="scss">	86	<style lang="scss">
87	.content {	87	.content {
88	display: flex;	88	display: flex;
89	flex-direction: column;	89	flex-direction: column;
90	align-items: center;	90	align-items: center;
91	background-color: #f7f6f6;	91	background-color: #f7f6f6;
92	min-height: 100vh;	92	min-height: 100vh;
93	.header {	93	.header {
94	background-color: #ffffff;	94	background-color: #ffffff;
95	width: 100%;	95	width: 100%;
96	// height: 232rpx;	96	// height: 232rpx;
97	padding: 20rpx 40rpx 16rpx 40rpx;	97	padding: 20rpx 40rpx 16rpx 40rpx;
98	box-sizing: border-box;	98	box-sizing: border-box;
99	position: fixed;	99	position: fixed;
100	top: 0;	100	top: 0;
101	left: 0;	101	left: 0;
102	// .searchBar {	102	// .searchBar {
103	// width: 670rpx;	103	// width: 670rpx;
104	// display: flex;	104	// display: flex;
105	// justify-content: center;	105	// justify-content: center;
106	// align-items: center;	106	// align-items: center;
107	// box-sizing: border-box;	107	// box-sizing: border-box;
108	// padding: 0rpx 16rpx;	108	// padding: 0rpx 16rpx;
109	// border: 1px solid #ff6b4a;	109	// border: 1px solid #ff6b4a;
110	// border-radius: 8rpx;	110	// border-radius: 8rpx;
111	// background-color: #ffffff;	111	// background-color: #ffffff;
112	// }	112	// }
113		113
114	.screenBar {	114	.screenBar {
115	width: 670rpx;	115	width: 670rpx;
116	// height: 110rpx;	116	// height: 110rpx;
117	height: 70rpx;	117	height: 70rpx;
118	display: flex;	118	display: flex;
119	flex-direction: row;	119	flex-direction: row;
120	justify-content: space-between;	120	justify-content: space-between;
121	align-items: center;	121	align-items: center;
122	color: #333333;	122	color: #333333;
123	font-size: 32rpx;	123	font-size: 32rpx;
124	}	124	}
125	.screenItem {	125	.screenItem {
126	height: 50rpx;	126	height: 50rpx;
127	font-size: 32rpx;	127	font-size: 32rpx;
128	color: #333333;	128	color: #333333;
129	display: flex;	129	display: flex;
130	justify-content: center;	130	justify-content: center;
131	align-items: center;	131	align-items: center;
132	transition: all 0.2s;	132	transition: all 0.2s;
133	}	133	}
134	.active {	134	.active {
135	// font-size: 34rpx;	135	// font-size: 34rpx;
136	color: #ec5d3b;	136	color: #ec5d3b;
137	}	137	}
138	.searchIpt {	138	.searchIpt {
139	height: 68rpx;	139	height: 68rpx;
140	width: 670rpx;	140	width: 670rpx;
141	padding: 16rpx;	141	padding: 16rpx;
142	font-size: 28rpx;	142	font-size: 28rpx;
143	box-sizing: border-box;	143	box-sizing: border-box;
144	}	144	}
145	}	145	}
146	.orderList {	146	.orderList {
147	// margin-top: 232rpx;	147	// margin-top: 232rpx;
148	margin-top: 132rpx;	148	margin-top: 132rpx;
149	}	149	}
150	.footer {	150	.footer {
151	font-size: 14px;	151	font-size: 14px;
152	color: #b8b8b8;	152	color: #b8b8b8;
153	margin: 40rpx 0;	153	margin: 40rpx 0;
154	}	154	}
155	}	155	}
156	</style>	156	</style>
157		157

src/pages/myOrderPaying/myOrderPaying.vue

Diff comments View file @607bc3a

1	<!-- 订单待付款待收货 -->	1	<!-- 订单待付款待收货 -->
2	<template>	2	<template>
3	<view class="content">	3	<view class="content">
4	<!-- 待付款 -->	4	<!-- 待付款 -->
5	<view	5	<view
6	class="order-time"	6	class="order-time"
7	v-if="status == '0'"	7	v-if="status == '0'"
8	>	8	>
9	<text>请在</text>	9	<text>请在</text>
10	<uni-countdown	10	<uni-countdown
11	color="#EC5D3B"	11	color="#EC5D3B"
12	splitor-color="#EC5D3B"	12	splitor-color="#EC5D3B"
13	:show-day="false"	13	:show-day="false"
14	:hour="0"	14	:hour="0"
15	:second="getTime"	15	:second="getTime"
16	@timeup=timeup	16	@timeup=timeup
17	></uni-countdown>	17	></uni-countdown>
18	<text>内完成付款</text>	18	<text>内完成付款</text>
19	</view>	19	</view>
20	<!-- 待收货 -->	20	<!-- 待收货 -->
21	<view	21	<view
22	class="headerBanner"	22	class="headerBanner"
23	v-if="status == '1'"	23	v-if="status == '1'"
24	>	24	>
25	<view class="bannerLeft">	25	<view class="bannerLeft">
26	<view class="T1">卖家已发货</view>	26	<view class="T1">卖家已发货</view>
27	<view class="T2">还剩确认收货</view>	27	<view class="T2">还剩确认收货</view>
28	</view>	28	</view>
29	<image	29	<image
30	src="../../static/car.png"	30	src="../../static/car.png"
31	mode="aspectFill"	31	mode="aspectFill"
32	></image>	32	></image>
33	</view>	33	</view>
34	<view class="order">	34	<view class="order">
35	<view class="order-user">	35	<view class="order-user">
36	<view class="order-user-head">	36	<view class="order-user-head">
37	<text class="p1">{{orderAddressInfo.userName}}</text>	37	<text class="p1">{{orderAddressInfo.userName}}</text>
38	<text class="p2">{{orderAddressInfo.telNumber}}</text>	38	<text class="p2">{{orderAddressInfo.telNumber}}</text>
39	</view>	39	</view>
40	<view class="order-user-body">	40	<view class="order-user-body">
41	<image src="../../static/myorder-paying-location.png"></image>	41	<image src="../../static/myorder-paying-location.png"></image>
42	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>	42	<text class="p3">{{orderAddressInfo.provinceName}} {{orderAddressInfo.cityName}} {{orderAddressInfo.countyName}}\n{{orderAddressInfo.detailInfo}}</text>
43	</view>	43	</view>
44	</view>	44	</view>
45	<view class="order-info">	45	<view class="order-info">
46	<view	46	<view
47	class="order-info-head"	47	class="order-info-head"
48	v-for="(orderInfoListItem,index) in orderInfoList"	48	v-for="(orderInfoListItem,index) in orderInfoList"
49	:key="index"	49	:key="index"
50	>	50	>
51	<image	51	<image
52	:src="orderInfoListItem.imgUrl"	52	:src="orderInfoListItem.imgUrl"
53	mode="aspectFill"	53	mode="aspectFill"
54	></image>	54	></image>
55	<view class="order-info-head-r">	55	<view class="order-info-head-r">
56	<text class="p1">{{orderInfoListItem.p_name}}</text>	56	<text class="p1">{{orderInfoListItem.p_name}}</text>
57	<view	57	<view
58	class="p2"	58	class="p2"
59	style="margin: 0;"	59	style="margin: 0;"
60	>	60	>
61	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻	61	规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
62	<!-- <view class="arrow"></view> -->	62	<!-- <view class="arrow"></view> -->
63	</view>	63	</view>
64	<view class="infoText-bottom">	64	<view class="infoText-bottom">
65	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>	65	<view class="markPrice">{{orderInfoListItem.nowPrice}}</view>
66	<view class="buy-num">X {{orderInfoListItem.num}}</view>	66	<view class="buy-num">X {{orderInfoListItem.num}}</view>
67	</view>	67	</view>
68	</view>	68	</view>
69	</view>	69	</view>
70	<!-- <view class="order-info-goodsnum">	70	<!-- <view class="order-info-goodsnum">
71	<text>X1</text>	71	<text>X1</text>
72	</view> -->	72	</view> -->
73	<text class="order-info-freight">	73	<text class="order-info-freight">
74	<text class="p1">运费</text>	74	<text class="p1">运费</text>
75	<text class="p2">免运费</text>	75	<text class="p2">免运费</text>
76	</text>	76	</text>
77	<text class="order-info-discount">	77	<text class="order-info-discount">
78	<text class="p1">优惠</text>	78	<text class="p1">优惠</text>
79	<text class="p2">-￥{{totalDiscount}}</text>	79	<text class="p2">-￥{{totalDiscount}}</text>
80	</text>	80	</text>
81	<text class="order-info-price">	81	<text class="order-info-price">
82	<text class="p1">实付</text>	82	<text class="p1">实付</text>
83	<text class="p2">￥{{orderInfo.order_info[0].total_fee}}</text>	83	<text class="p2">￥{{orderInfo.order_info.total_fee}}</text>
84	</text>	84	</text>
85	<text class="order-info-num">	85	<text class="order-info-num">
86	<text>订单号：{{payId}}</text>	86	<text>订单号：{{payId}}</text>
87	</text>	87	</text>
88	<text class="order-info-time">	88	<text class="order-info-time">
89	<text>下单时间：{{orderInfo.order_info[0].pay_time \| timerChange}}</text>	89	<text>下单时间：{{orderInfo.order_info.pay_time \| timerChange}}</text>
90	</text>	90	</text>
91	<view class="order-info-hr"></view>	91	<view class="order-info-hr"></view>
92	<view class="order-info-contact">	92	<view class="order-info-contact">
93	<image src="../../static/myorder-paying-contact.png"></image>	93	<image src="../../static/myorder-paying-contact.png"></image>
94	<text>联系客服</text>	94	<text>联系客服</text>
95	</view>	95	</view>
96	</view>	96	</view>
97	</view>	97	</view>
98	<view	98	<view
99	class="order-confim"	99	class="order-confim"
100	v-if="status == '0'"	100	v-if="status == '0'"
101	>	101	>
102	<button	102	<button
103	class="b1"	103	class="b1"
104	@click="cancleOrder"	104	@click="cancleOrder"
105	>取消订单</button>	105	>取消订单</button>
106	<button	106	<button
107	class="b2"	107	class="b2"
108	@click="paylog"	108	@click="paylog"
109	>立即支付</button>	109	>立即支付</button>
110	</view>	110	</view>
111		111
112	<view	112	<view
113	class="order-confim"	113	class="order-confim"
114	v-if="status == '1'"	114	v-if="status == '1'"
115	>	115	>
116	<!-- <button class="b1">取消订单</button> -->	116	<!-- <button class="b1">取消订单</button> -->
117	<button	117	<button
118	class="b2"	118	class="b2"
119	@click="confirmOrder"	119	@click="confirmOrder"
120	>确认收货</button>	120	>确认收货</button>
121	</view>	121	</view>
122	</view>	122	</view>
123	</template>	123	</template>
124		124
125	<script>	125	<script>
126	import store from '@/store'	126	import store from '@/store'
127	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'	127	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
128	export default {	128	export default {
129	components: {	129	components: {
130	UniCountdown,	130	UniCountdown,
131	},	131	},
132	data () {	132	data () {
133	return {	133	return {
134	payId: '',	134	payId: '',
135	payTime: '',	135	payTime: '',
136	status: '', // status 0 待付款 1 已发货	136	status: '', // status 0 待付款 1 已发货
137	uid: '',	137	uid: '',
138	openid: '',	138	openid: '',
139	lefttime: 0,	139	lefttime: 0,
140	isPay: 0,	140	isPay: 0,
141	}	141	}
142	},	142	},
143	onLoad: function (option) {	143	onLoad: function ({payId,state,isPay}) {
144	console.log(option)	144	console.log('++++++++++++++++++',payId,state,isPay)
145	this.payId = option.payId	145	this.payId = payId
146	this.status = option.status	146	this.status = state
147	this.isPay = option.isPay	147	this.isPay = isPay
148	const openid = uni.getStorageSync('openid')	148	const openid = uni.getStorageSync('openid')
149	const uid = this.$store.state.user.uid	149	const uid = this.$store.state.user.uid
150	this.uid = uid	150	this.uid = uid
151	this.openid = openid	151	this.openid = openid
152	store.dispatch('orderRead/getOrderInfo', {	152	store.dispatch('orderRead/getOrderInfo', {
153	pay_id: this.payId,	153	pay_id: this.payId,
154	uid: '1',	154	uid: '1',
155	openid: openid,	155	openid: openid,
156	})	156	})
157	// this.orderInfo = this.$store.state.orderRead.orderInfo	157	// this.orderInfo = this.$store.state.orderRead.orderInfo
158	},	158	},
159	// 若从支付页面跳转过来，返回直接返回到首页	159	// 若从支付页面跳转过来，返回直接返回到首页
160	onBackPress(option) {	160	onBackPress(option) {
161	if (option.from === 'backbutton' && this.isPay) {	161	if (option.from === 'backbutton' && this.isPay) {
162	uni.switchTab({	162	uni.switchTab({
163	url: '/pages/index/index',	163	url: '/pages/index/index',
164	})	164	})
165	return true // 阻止默认返回行为	165	return true // 阻止默认返回行为
166	}	166	}
167	},	167	},
168	computed: {	168	computed: {
169	// 获取订单详细信息	169	// 获取订单详细信息
170	orderInfo () {	170	orderInfo () {
171	console.log('orderInfo', this.$store.state.orderRead.orderInfo)	171	console.log('orderInfo', this.$store.state.orderRead.orderInfo)
172	return this.$store.state.orderRead.orderInfo \|\| {}	172	return this.$store.state.orderRead.orderInfo \|\| {}
173	},	173	},
174	orderInfoList () {	174	orderInfoList () {
175	const orderInfoList = this.orderInfo.order_info[0].list	175	const orderInfoList = this.$store.state.orderRead.orderInfo.order_info.list
176	return orderInfoList	176	return orderInfoList
177	},	177	},
178	// 获取订单地址信息	178	// 获取订单地址信息
179	orderAddressInfo () {	179	orderAddressInfo () {
180	return this.orderInfo.order_info[0].address	180	return this.orderInfo.order_info.address
181	},	181	},
182	// 订单付款时间	182	// 订单付款时间
183	getTime () {	183	getTime () {
184	return this.orderInfo.order_info[0].lefttime	184	return this.orderInfo.order_info.lefttime
185	},	185	},
186	// 计算总优惠额	186	// 计算总优惠额
187	totalDiscount () {	187	totalDiscount () {
188	const discountInfoList = this.orderInfo.discount_info	188	const discountInfoList = this.orderInfo.discount_info
189	let totalDiscount = 0	189	let totalDiscount = 0
190	if (discountInfoList) {	190	if (discountInfoList) {
191	discountInfoList.map((discountItem, index) => {	191	discountInfoList.map((discountItem, index) => {
192	totalDiscount += Number(discountItem.value)	192	totalDiscount += Number(discountItem.value)
193	})	193	})
194	}	194	}
195	// console.log(totalDiscount)	195	// console.log(totalDiscount)
196	return totalDiscount	196	return totalDiscount
197	},	197	},
198	},	198	},
199	methods: {	199	methods: {
200	// 取消订单	200	// 取消订单
201	timeup () {	201	timeup () {
202	this.cancleOrder()	202	this.cancleOrder()
203	},	203	},
204	cancleOrder () {	204	cancleOrder () {
205	const uid = this.uid	205	const uid = this.uid
206	const openid = this.openid	206	const openid = this.openid
207	uni.showModal({	207	uni.showModal({
208	title: '提示',	208	title: '提示',
209	content: '现在取消，订单不可恢复哦，确认取消吗？',	209	content: '现在取消，订单不可恢复哦，确认取消吗？',
210	success: function (res) {	210	success: function (res) {
211	if (res.confirm) {	211	if (res.confirm) {
212	store.dispatch('cancelOrder/cancel', {	212	store.dispatch('cancelOrder/cancel', {
213	keyname: '1',	213	keyname: '1',
214	uid: uid,	214	uid: uid,
215	openid: openid,	215	openid: openid,
216	})	216	})
217	} else if (res.cancel) {	217	} else if (res.cancel) {
218	console.log('用户点击取消')	218	console.log('用户点击取消')
219	}	219	}
220	},	220	},
221	})	221	})
222	},	222	},
223	paylog () {	223	paylog () {
224		224
225	},	225	},
226	confirmOrder () {	226	confirmOrder () {
227	store.dispatch('statusConfirm/confirm', {	227	store.dispatch('statusConfirm/confirm', {
228	uid: this.uid,	228	uid: this.uid,
229	openid: this.openid,	229	openid: this.openid,
230	oldway: '1',	230	oldway: '1',
231	way: '2',	231	way: '2',
232	pay_id: this.payId,	232	pay_id: this.payId,
233	judgeContent: '',	233	judgeContent: '',
234	orderInfo: this.orderInfo.order_info,	234	orderInfo: this.orderInfo.order_info,
235	}).then(	235	}).then(
236	setTimeout(() => {	236	setTimeout(() => {
237	uni.navigateBack()	237	uni.navigateBack()
238	}, 1500),	238	}, 1500),
239	)	239	)
240	},	240	},
241	},	241	},
242	filters: {	242	filters: {
243	timerChange: function(value) {	243	timerChange: function(value) {
244	var newDate = new Date()	244	var newDate = new Date()
245	newDate.setTime(value * 1000)	245	newDate.setTime(value * 1000)
246	return newDate.toLocaleString()	246	return newDate.toLocaleString()
247	},	247	},
248	},	248	},
249	}	249	}
250	</script>	250	</script>
251		251
252	<style lang="scss" scoped>	252	<style lang="scss" scoped>
253	.content {	253	.content {
254	min-height: 100vh;	254	min-height: 100vh;
255	display: flex;	255	display: flex;
256	flex-direction: column;	256	flex-direction: column;
257	justify-content: flex-start;	257	justify-content: flex-start;
258	align-items: center;	258	align-items: center;
259	background-color: #f2f2f2;	259	background-color: #f2f2f2;
260	}	260	}
261		261
262	.order {	262	.order {
263	margin-bottom: 112rpx;	263	margin-bottom: 112rpx;
264	background: #f2f2f2;	264	background: #f2f2f2;
265	margin-top: 140rpx;	265	margin-top: 140rpx;
266	width: 670rpx;	266	width: 670rpx;
267	}	267	}
268		268
269	.order-time {	269	.order-time {
270	width: 100%;	270	width: 100%;
271	height: 140rpx;	271	height: 140rpx;
272	background-color: #fff;	272	background-color: #fff;
273	display: flex;	273	display: flex;
274	justify-content: center;	274	justify-content: center;
275	align-items: center;	275	align-items: center;
276	position: fixed;	276	position: fixed;
277	top: 0;	277	top: 0;
278	left: 0;	278	left: 0;
279	text {	279	text {
280	// font-family: PingFangSC-Regular;	280	// font-family: PingFangSC-Regular;
281	// margin-top: 48rpx;	281	// margin-top: 48rpx;
282	font-size: 14px;	282	font-size: 14px;
283	color: #333333;	283	color: #333333;
284	letter-spacing: -0.26px;	284	letter-spacing: -0.26px;
285	}	285	}
286	.p2 {	286	.p2 {
287	// font-family: DINAlternate-Bold;	287	// font-family: DINAlternate-Bold;
288	margin: 42rpx 20rpx 0 20rpx;	288	margin: 42rpx 20rpx 0 20rpx;
289	font-size: 18px;	289	font-size: 18px;
290	color: #ec5d3b;	290	color: #ec5d3b;
291	letter-spacing: -0.34px;	291	letter-spacing: -0.34px;
292	}	292	}
293	}	293	}
294	.headerBanner {	294	.headerBanner {
295	width: 100%;	295	width: 100%;
296	height: 140rpx;	296	height: 140rpx;
297	background: #4a90e2;	297	background: #4a90e2;
298	padding: 26rpx 60rpx 24rpx 60rpx;	298	padding: 26rpx 60rpx 24rpx 60rpx;
299	box-sizing: border-box;	299	box-sizing: border-box;
300	color: #ffffff;	300	color: #ffffff;
301	display: flex;	301	display: flex;
302	justify-content: space-between;	302	justify-content: space-between;
303	align-items: center;	303	align-items: center;
304	position: fixed;	304	position: fixed;
305	top: 0;	305	top: 0;
306	left: 0;	306	left: 0;
307	.bannerLeft {	307	.bannerLeft {
308	font-size: 36rpx;	308	font-size: 36rpx;
309	display: flex;	309	display: flex;
310	flex-direction: column;	310	flex-direction: column;
311	justify-content: center;	311	justify-content: center;
312	align-items: center;	312	align-items: center;
313	.T2 {	313	.T2 {
314	font-size: 24rpx;	314	font-size: 24rpx;
315	}	315	}
316	}	316	}
317	image {	317	image {
318	height: 56rpx;	318	height: 56rpx;
319	width: 72rpx;	319	width: 72rpx;
320	}	320	}
321	}	321	}
322		322
323	.order-user {	323	.order-user {
324	height: 228rpx;	324	height: 228rpx;
325	background: #ffffff;	325	background: #ffffff;
326	border-radius: 14rpx;	326	border-radius: 14rpx;
327	margin: 0 auto;	327	margin: 0 auto;
328	margin-top: 20rpx;	328	margin-top: 20rpx;
329	margin-bottom: 20rpx;	329	margin-bottom: 20rpx;
330	.order-user-head {	330	.order-user-head {
331	display: flex;	331	display: flex;
332	height: 108rpx;	332	height: 108rpx;
333	align-items: center;	333	align-items: center;
334	margin-left: 126rpx;	334	margin-left: 126rpx;
335	.p1 {	335	.p1 {
336	// font-family: PingFangSC-Regular;	336	// font-family: PingFangSC-Regular;
337	font-size: 14px;	337	font-size: 14px;
338	color: #333333;	338	color: #333333;
339	letter-spacing: -0.26px;	339	letter-spacing: -0.26px;
340	margin-right: 20rpx;	340	margin-right: 20rpx;
341	}	341	}
342	.p2 {	342	.p2 {
343	// font-family: PingFangSC-Regular;	343	// font-family: PingFangSC-Regular;
344	font-size: 14px;	344	font-size: 14px;
345	color: #999999;	345	color: #999999;
346	letter-spacing: -0.26px;	346	letter-spacing: -0.26px;
347	}	347	}
348	}	348	}
349	.order-user-body {	349	.order-user-body {
350	display: flex;	350	display: flex;
351	width: 100%;	351	width: 100%;
352	image {	352	image {
353	width: 24px;	353	width: 24px;
354	height: 26px;	354	height: 26px;
355	margin: 12rpx 32rpx 0 40rpx;	355	margin: 12rpx 32rpx 0 40rpx;
356	}	356	}
357	.p3 {	357	.p3 {
358	// font-family: PingFangSC-Semibold;	358	// font-family: PingFangSC-Semibold;
359	font-size: 14px;	359	font-size: 14px;
360	color: #333333;	360	color: #333333;
361	letter-spacing: -0.26px;	361	letter-spacing: -0.26px;
362	}	362	}
363	}	363	}
364	}	364	}
365		365
366	.order-info {	366	.order-info {
367	background-color: #fff;	367	background-color: #fff;
368	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);	368	box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
369	border-radius: 16rpx;	369	border-radius: 16rpx;
370	margin: 0 auto;	370	margin: 0 auto;
371	view {	371	view {
372	margin-left: 40rpx;	372	margin-left: 40rpx;
373	}	373	}
374	text {	374	text {
375	font-size: 14px;	375	font-size: 14px;
376	}	376	}
377	.order-info-head {	377	.order-info-head {
378	display: flex;	378	display: flex;
379	padding-top: 40rpx;	379	padding-top: 40rpx;
380	image {	380	image {
381	height: 188rpx;	381	height: 188rpx;
382	width: 188rpx;	382	width: 188rpx;
383	}	383	}
384	.order-info-head-r {	384	.order-info-head-r {
385	margin: 0;	385	margin: 0;
386	width: 368rpx;	386	width: 368rpx;
387	margin-left: 24rpx;	387	margin-left: 24rpx;
388	// margin-top: 40rpx;	388	// margin-top: 40rpx;
389	text {	389	text {
390	display: block;	390	display: block;
391	}	391	}
392	// .arrow{	392	// .arrow{
393	// width: 0;	393	// width: 0;
394	// height: 0;	394	// height: 0;
395	// border-left: 5px transparent;	395	// border-left: 5px transparent;
396	// border-right: 5px transparent;	396	// border-right: 5px transparent;
397	// border-top: 5px #979797;	397	// border-top: 5px #979797;
398	// border-bottom: 0 transparent;	398	// border-bottom: 0 transparent;
399	// border-style: solid;	399	// border-style: solid;
400	// position: relative;	400	// position: relative;
401	// // transform: scaleY(-1);	401	// // transform: scaleY(-1);
402	// }	402	// }
403	// .arrow::after{	403	// .arrow::after{
404	// content: '';	404	// content: '';
405	// position: absolute;	405	// position: absolute;
406	// top: -6.5px;	406	// top: -6.5px;
407	// left: -5px;	407	// left: -5px;
408	// border-left: 5px transparent;	408	// border-left: 5px transparent;
409	// border-right: 5px transparent;	409	// border-right: 5px transparent;
410	// border-top: 5px #FFFFFF;	410	// border-top: 5px #FFFFFF;
411	// border-bottom: 0 transparent;	411	// border-bottom: 0 transparent;
412	// border-style: solid;	412	// border-style: solid;
413	// }	413	// }
414	.p1 {	414	.p1 {
415	min-height: 40px;	415	min-height: 40px;
416	// font-family: PingFangSC-Regular;	416	// font-family: PingFangSC-Regular;
417	font-size: 14px;	417	font-size: 14px;
418	color: #333333;	418	color: #333333;
419	letter-spacing: -0.26px;	419	letter-spacing: -0.26px;
420	line-height: 18px;	420	line-height: 18px;
421	// line-height: 20px;	421	// line-height: 20px;
422	}	422	}
423	.p2 {	423	.p2 {
424	height: 34px;	424	height: 34px;
425	padding: 1px 0 3px 0;	425	padding: 1px 0 3px 0;
426	// font-family: PingFangSC-Regular;	426	// font-family: PingFangSC-Regular;
427	font-size: 12px;	427	font-size: 12px;
428	color: #999999;	428	color: #999999;
429	letter-spacing: -0.23px;	429	letter-spacing: -0.23px;
430	}	430	}
431	.infoText-bottom {	431	.infoText-bottom {
432	display: flex;	432	display: flex;
433	flex-direction: row;	433	flex-direction: row;
434	justify-content: flex-start;	434	justify-content: flex-start;
435	align-items: center;	435	align-items: center;
436	width: 100%;	436	width: 100%;
437	margin-left: 0;	437	margin-left: 0;
438	.markPrice {	438	.markPrice {
439	font-size: 14px;	439	font-size: 14px;
440	color: #ff6b4a;	440	color: #ff6b4a;
441	margin-right: 20rpx;	441	margin-right: 20rpx;
442	margin-left: 0rpx;	442	margin-left: 0rpx;
443	}	443	}
444	.buy-num {	444	.buy-num {
445	font-size: 12px;	445	font-size: 12px;
446	color: #999999;	446	color: #999999;
447	}	447	}
448	}	448	}
449	}	449	}
450	}	450	}
451	// .order-info-goodsnum {	451	// .order-info-goodsnum {
452	// display: flex;	452	// display: flex;
453	// align-items: center;	453	// align-items: center;
454	// justify-content: flex-end;	454	// justify-content: flex-end;
455	// text {	455	// text {
456	// margin-right: 44rpx;	456	// margin-right: 44rpx;
457	// // ont-family: PingFangSC-Regular;	457	// // ont-family: PingFangSC-Regular;
458	// font-size: 12px;	458	// font-size: 12px;
459	// color: #999999;	459	// color: #999999;
460	// letter-spacing: -0.23px;	460	// letter-spacing: -0.23px;
461	// }	461	// }
462	// }	462	// }
463	.order-info-freight {	463	.order-info-freight {
464	display: block;	464	display: block;
465	margin-left: 40rpx;	465	margin-left: 40rpx;
466	margin-top: 22rpx;	466	margin-top: 22rpx;
467	.p1 {	467	.p1 {
468	// font-family: PingFangSC-Regular;	468	// font-family: PingFangSC-Regular;
469	font-size: 14px;	469	font-size: 14px;
470	color: #333333;	470	color: #333333;
471	letter-spacing: -0.26px;	471	letter-spacing: -0.26px;
472	line-height: 18px;	472	line-height: 18px;
473	margin-right: 24px;	473	margin-right: 24px;
474	}	474	}
475	.p2 {	475	.p2 {
476	// font-family: PingFangSC-Regular;	476	// font-family: PingFangSC-Regular;
477	font-size: 14px;	477	font-size: 14px;
478	color: #ff6b4a;	478	color: #ff6b4a;
479	letter-spacing: -0.26px;	479	letter-spacing: -0.26px;
480	}	480	}
481	}	481	}
482	.order-info-discount {	482	.order-info-discount {
483	display: block;	483	display: block;
484	margin-left: 40rpx;	484	margin-left: 40rpx;
485	margin-top: 24rpx;	485	margin-top: 24rpx;
486	.p1 {	486	.p1 {
487	// font-family: PingFangSC-Regular;	487	// font-family: PingFangSC-Regular;
488	font-size: 14px;	488	font-size: 14px;
489	color: #333333;	489	color: #333333;
490	letter-spacing: -0.26px;	490	letter-spacing: -0.26px;
491	line-height: 18px;	491	line-height: 18px;
492	margin-right: 24px;	492	margin-right: 24px;
493	}	493	}
494	.p2 {	494	.p2 {
495	// font-family: PingFangSC-Regular;	495	// font-family: PingFangSC-Regular;
496	font-size: 14px;	496	font-size: 14px;
497	color: #ff6b4a;	497	color: #ff6b4a;
498	letter-spacing: -0.26px;	498	letter-spacing: -0.26px;
499	}	499	}
500	}	500	}
501	.order-info-price {	501	.order-info-price {
502	display: block;	502	display: block;
503	margin-left: 40rpx;	503	margin-left: 40rpx;
504	margin-top: 24rpx;	504	margin-top: 24rpx;
505	.p1 {	505	.p1 {
506	// font-family: PingFangSC-Semibold;	506	// font-family: PingFangSC-Semibold;
507	font-size: 14px;	507	font-size: 14px;
508	color: #333333;	508	color: #333333;
509	letter-spacing: -0.26px;	509	letter-spacing: -0.26px;
510	line-height: 18px;	510	line-height: 18px;
511	margin-right: 24px;	511	margin-right: 24px;
512	}	512	}
513	.p2 {	513	.p2 {
514	// font-family: PingFangSC-Semibold;	514	// font-family: PingFangSC-Semibold;
515	font-size: 14px;	515	font-size: 14px;
516	color: #ff6b4a;	516	color: #ff6b4a;
517	letter-spacing: -0.26px;	517	letter-spacing: -0.26px;
518	}	518	}
519	}	519	}
520	.order-info-num {	520	.order-info-num {
521	display: block;	521	display: block;
522	margin-left: 40rpx;	522	margin-left: 40rpx;
523	margin-top: 44rpx;	523	margin-top: 44rpx;
524	text {	524	text {
525	// font-family: PingFangSC-Regular;	525	// font-family: PingFangSC-Regular;
526	font-size: 12px;	526	font-size: 12px;
527	color: #999999;	527	color: #999999;
528	letter-spacing: -0.23px;	528	letter-spacing: -0.23px;
529	}	529	}
530	}	530	}
531	.order-info-time {	531	.order-info-time {
532	display: block;	532	display: block;
533	margin: 8rpx 0 48rpx 40rpx;	533	margin: 8rpx 0 48rpx 40rpx;
534	text {	534	text {
535	// font-family: PingFangSC-Regular;	535	// font-family: PingFangSC-Regular;
536	font-size: 12px;	536	font-size: 12px;
537	color: #999999;	537	color: #999999;
538	letter-spacing: -0.23px;	538	letter-spacing: -0.23px;
539	}	539	}
540	}	540	}
541	.order-info-hr {	541	.order-info-hr {
542	width: 520rpx;	542	width: 520rpx;
543	height: 1px;	543	height: 1px;
544	background-color: #e9e9e9;	544	background-color: #e9e9e9;
545	margin-bottom: 20rpx;	545	margin-bottom: 20rpx;
546	}	546	}
547	.order-info-contact {	547	.order-info-contact {
548	display: flex;	548	display: flex;
549	padding-bottom: 28rpx;	549	padding-bottom: 28rpx;
550	image {	550	image {
551	width: 19px;	551	width: 19px;
552	height: 16px;	552	height: 16px;
553	}	553	}
554	text {	554	text {
555	// font-family: PingFangSC-Regular;	555	// font-family: PingFangSC-Regular;
556	margin-left: 20rpx;	556	margin-left: 20rpx;
557	font-size: 14px;	557	font-size: 14px;
558	color: #333333;	558	color: #333333;
559	letter-spacing: -0.26px;	559	letter-spacing: -0.26px;
560	line-height: 18px;	560	line-height: 18px;
561	}	561	}
562	}	562	}
563	}	563	}
564		564
565	.order-confim {	565	.order-confim {
566	display: flex;	566	display: flex;
567	align-items: center;	567	align-items: center;
568	justify-content: flex-end;	568	justify-content: flex-end;
569	// z-index: 999;	569	// z-index: 999;
570	width: 100%;	570	width: 100%;
571	height: 112rpx;	571	height: 112rpx;
572	position: fixed;	572	position: fixed;
573	bottom: 0;	573	bottom: 0;
574	background: #ffffff;	574	background: #ffffff;
575	button {	575	button {
576	width: 204rpx;	576	width: 204rpx;
577	height: 80rpx;	577	height: 80rpx;
578	border: 1px solid #ff6b4a;	578	border: 1px solid #ff6b4a;
579	border-radius: 40rpx;	579	border-radius: 40rpx;
580	font-size: 32rpx;	580	font-size: 32rpx;
581	letter-spacing: -0.3px;	581	letter-spacing: -0.3px;
582	margin-right: 0;	582	margin-right: 0;
583	}	583	}
584	.b1 {	584	.b1 {
585	// font-family: PingFangSC-Regular;	585	// font-family: PingFangSC-Regular;
586	color: #ff6b4a;	586	color: #ff6b4a;
587	background-color: #ffffff;	587	background-color: #ffffff;
588	}	588	}
589	.b2 {	589	.b2 {
590	// font-family: PingFangSC-Regular;	590	// font-family: PingFangSC-Regular;
591	background-color: #ff6b4a;	591	background-color: #ff6b4a;
592	color: #ffffff;	592	color: #ffffff;
593	margin: 0 26rpx 0 20rpx;	593	margin: 0 26rpx 0 20rpx;
594	}	594	}
595	}	595	}
596	</style>	596	</style>
597		597

src/store/modules/cart.js

Diff comments View file @607bc3a

1	import urlAlias from '../url'	1	import urlAlias from '../url'
2	import request from '../request'	2	import request from '../request'
3		3
4	const { cartList, cartModi, cartDel, cartAdd } = urlAlias	4	const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5		5
6	const state = {	6	const state = {
7	cartList: [],	7	cartList: [],
8	}	8	}
9		9
10	const mutations = {	10	const mutations = {
11	INIT: (state, cartList) => {	11	INIT: (state, cartList) => {
12	state.cartList = cartList	12	state.cartList = cartList
13	},	13	},
14	DEL: (state, index) => {	14	DEL: (state, index) => {
15	console.log('mutations====>', state.cartList)	15	console.log('mutations====>', state.cartList)
16	state.cartList.splice(index, 1)	16	state.cartList.splice(index, 1)
17	console.log('mutations====>index', index)	17	console.log('mutations====>index', index)
18	// state.cartList=delList	18	// state.cartList=delList
19	},	19	},
20	MODI: (state, args) => {	20	MODI: (state, args) => {
21	console.log('the num', state.cartList[args.index].num)	21	console.log('the num', state.cartList[args.index].num)
22	console.log('mutations====>isadd', args)	22	console.log('mutations====>isadd', args)
23	state.cartList[args.index].num = args.num	23	state.cartList[args.index].num = args.num
24	console.log('the num', state.cartList[args.index].num)	24	console.log('the num', state.cartList[args.index].num)
25	},	25	},
26		26
27	}	27	}
28		28
29	const actions = {	29	const actions = {
30	// 获取购物车列表	30	// 获取购物车列表
31	getCartList({ commit }, param) {	31	getCartList({ commit }, param) {
32	request({	32	request({
33	url: cartList,	33	url: cartList,
34	data: param,	34	data: param,
35	success: (res) => {	35	success: (res) => {
36	console.log('cart===>接口数据', res.data.data)	36	console.log('cart===>接口数据', res.data.data)
37	commit('INIT', res.data.data)	37	commit('INIT', res.data.data)
38	},	38	},
39	fail: (res) => {	39	// fail: (res) => {
40	console.log('fail status === > ', res)	40	// console.log('fail status === > ', res)
41	},	41	// },
42	complete: (res) => {	42	// complete: (res) => {
43	console.log('complete status === > ', res)	43	// console.log('complete status === > ', res)
44	},	44	// },
45	})	45	})
46	},	46	},
47	// 修改购物车数量	47	// 修改购物车数量
48	modiCart({ commit }, param) {	48	modiCart({ commit }, param) {
49	const arg = Object.assign({ num: param.num }, param.args)	49	const arg = Object.assign({ num: param.num }, param.args)
50	delete param.args	50	delete param.args
51	request({	51	request({
52	url: cartModi,	52	url: cartModi,
53	data: param,	53	data: param,
54	success: (res) => {	54	success: (res) => {
55	console.log('modiCart-res=====>', res.data)	55	console.log('modiCart-res=====>', res.data)
56	console.log('modi-parm', param)	56	console.log('modi-parm', param)
57	commit('MODI', arg)	57	commit('MODI', arg)
58	},	58	},
59	fail: (res) => {	59	fail: (res) => {
60	console.log('fail status === > ', res)	60	console.log('fail status === > ', res)
61	},	61	},
62	complete: (res) => {	62	complete: (res) => {
63	console.log('complete status === > ', res)	63	console.log('complete status === > ', res)
64	},	64	},
65	})	65	})
66	},	66	},
67	// 删除购物车商品	67	// 删除购物车商品
68	delCart({ commit }, param) {	68	delCart({ commit }, param) {
69	const arg = param.arg	69	const arg = param.arg
70	delete param.arg	70	delete param.arg
71	request({	71	request({
72	url: cartDel,	72	url: cartDel,
73	data: param,	73	data: param,
74	success: (res) => {	74	success: (res) => {
75	console.log('del-parm', param)	75	console.log('del-parm', param)
76	console.log('del-myparms==>', arg)	76	console.log('del-myparms==>', arg)
77	commit('DEL', arg)	77	commit('DEL', arg)
78	},	78	},
79	fail: (res) => {	79	fail: (res) => {
80	console.log('fail status === > ', res)	80	console.log('fail status === > ', res)
81	},	81	},
82	complete: (res) => {	82	complete: (res) => {
83	console.log('complete status === > ', res)	83	console.log('complete status === > ', res)
84	},	84	},
85	})	85	})
86	},	86	},
87	// 添加到购物车	87	// 添加到购物车
88	addCart({ commit }, param) {	88	addCart({ commit }, param) {
89	console.log('请求接口开始')	89	console.log('请求接口开始')
90	request({	90	request({
91	url: cartAdd,	91	url: cartAdd,
92	data: param,	92	data: param,
93	success: (res) => {	93	success: (res) => {
94	console.log('add-parm', param)	94	console.log('add-parm', param)
95	console.log('addcart===>res.data===>', res.data)	95	console.log('addcart===>res.data===>', res.data)
96	// commit('INIT', res.data.data)	96	// commit('INIT', res.data.data)
97	},	97	},
98	fail: (res) => {	98	fail: (res) => {
99	console.log('fail status === > ', res)	99	console.log('fail status === > ', res)
100	},	100	},
101	complete: (res) => {	101	complete: (res) => {
102	console.log('complete status === > ', res)	102	console.log('complete status === > ', res)
103	},	103	},
104	})	104	})
105	},	105	},
106	}	106	}
107		107
108	export default {	108	export default {
109	namespaced: true,	109	namespaced: true,
110	state,	110	state,
111	mutations,	111	mutations,
112	actions,	112	actions,
113	}	113	}
114		114

src/store/modules/orderRead.js

Diff comments View file @607bc3a

 import urlAlias from '../url'
 import request from '../request'
 const {
   orderRead
 } = urlAlias
 const state = {
   orderInfo: {}
 }
 const mutations = {
   INIT: (state, orderInfo) => {
     state.orderInfo = orderInfo
   }
 }
 const actions = {
   getOrderInfo({ commit }, param) {
     request({
       url: orderRead,
       data: param,
       success: (res) => {
         commit("INIT", res.data.data)
+		console.log('res',res)
       }
     })
   }
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions
 }