Adam / gulu-vue

Compare View

switch
from
...
to
 
Commits (12)
Showing 28 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <easy-loadimage mode="widthFix" 6 <easy-loadimage mode="widthFix"
7 :scroll-top="scrollTop"
8 :image-src="goods.imgurl?goods.imgurl:goods.pic"
9 :viewHeight="viewHeight"></easy-loadimage>
10 <!-- <image
7 :scroll-top="scrollTop" 11 mode="widthFix"
8 :image-src="goods.imgurl?goods.imgurl:goods.pic" 12 :src="goods.imgurl?goods.imgurl:goods.pic"
9 :viewHeight="viewHeight"></easy-loadimage> 13 ></image> -->
10 <!-- <image 14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
11 mode="widthFix" 15 <view class="info">
12 :src="goods.imgurl?goods.imgurl:goods.pic" 16 <view class="priceBox">
13 ></image> --> 17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 18 <view class="originCost">
15 <view class="info"> 19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
16 <view class="priceBox"> 20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 21 </view>
18 <view class="originCost"> 22 </view>
19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 23 <view class="trade_num">{{goods.trade_num}}人购买</view>
20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 24 </view>
21 </view> 25 </view>
22 </view> 26 </template>
23 <view class="trade_num">{{goods.trade_num}}人购买</view> 27
24 </view> 28 <script>
29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30 // const MockData = require('@/static/easy-loadimage/mock-data.json')
25 </view> 31 export default {
32 components:{easyLoadimage},
26 </template> 33 props: {
27 34 /**
28 <script> 35 * 商品数据
29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' 36 */
30 // const MockData = require('@/static/easy-loadimage/mock-data.json') 37 goods: {
31 export default { 38 id: Number,
32 components:{easyLoadimage}, 39 imgurl: String,
33 props: { 40 name: String,
34 /** 41 rsSon: Object,
35 * 商品数据 42 originCost: String,
36 */ 43 price: String,
37 goods: { 44 trade_num: String,
38 id: Number, 45 goodType: String,
39 imgurl: String, 46 },
40 name: String, 47 scrollTop:Number,
48 viewHeight:Number,
41 rsSon: Object, 49 },
42 originCost: String, 50 created () {
43 price: String, 51 },
44 trade_num: String, 52 data () {
45 goodType: String, 53 return {
46 }, 54
47 scrollTop:Number, 55 }
48 viewHeight:Number, 56 },
57
49 }, 58 methods: {
50 created () { 59 toGoods (id, skId) {
51 }, 60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
52 data () { 61 uni.navigateTo({
53 return { 62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
54 63 success: res => {},
55 } 64 fail: () => {},
56 }, 65 complete: () => {},
57 66 })
58 methods: { 67 },
59 toGoods (id, skId) { 68 },
60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) 69 }
61 uni.navigateTo({ 70 </script>
62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, 71
63 success: res => {}, 72 <style lang="scss">
73
64 fail: () => {}, 74 image {
65 complete: () => {}, 75 width: 100%;
66 }) 76 height: 120rpx;
67 }, 77 }
68 }, 78 .name {
69 } 79 width: 92%;
70 </script> 80 height: 54rpx;
71 81 padding: 5px 4%;
72 <style lang="scss"> 82 display: -webkit-box;
73 83 -webkit-box-orient: vertical;
74 image { 84 -webkit-line-clamp: 2;
75 width: 100%; 85 text-align: justify;
76 height: 120rpx; 86 overflow: hidden;
77 } 87 font-size: 26rpx;
78 .name { 88 color: #333333;
79 width: 92%; 89 }
80 height: 54rpx; 90 .info {
81 padding: 5px 4%; 91 display: flex;
82 display: -webkit-box; 92 justify-content: space-between;
83 -webkit-box-orient: vertical; 93 align-items: center;
84 -webkit-line-clamp: 2; 94 width: 92%;
85 text-align: justify; 95 padding: 5px 4% 5px 4%;
86 overflow: hidden; 96 .priceBox {
87 font-size: 26rpx; 97 display: flex;
88 color: #333333; 98 justify-content: space-between;
89 } 99 align-items: center;
90 .info { 100 .price {
91 display: flex; 101 color: #eb5d3b;
92 justify-content: space-between; 102 font-size: 28rpx;
93 align-items: center; 103 font-weight: 600;
94 width: 92%; 104 margin-right: 10rpx;
95 padding: 5px 4% 5px 4%; 105 }
96 .priceBox { 106 .originCost {
97 display: flex; 107 text-decoration: line-through;
98 justify-content: space-between; 108 color: #999999;
99 align-items: center; 109 font-size: 20rpx;
100 .price { 110 }
101 color: #eb5d3b; 111 }
102 font-size: 28rpx; 112 .trade_num {
103 font-weight: 600; 113 color: #999999;
104 margin-right: 10rpx; 114 font-size: 20rpx;
105 } 115 }
106 .originCost { 116 }
107 text-decoration: line-through; 117 </style>
108 color: #999999; 118
src/components/EasyLoadimage/EasyLoadimage.vue
Diff comments   View file @92d01cf
File was created 1 <template>
2 <view class="easy-loadimage" :id="uid">
3 <image class="origin-img" :src="imageSrc?imageSrc:defaultImg" :mode="mode"
4 v-if="loadImg&&!isLoadError"
5 v-show="showImg"
6 :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
7 @load="handleImgLoad"
8 @error="handleImgError">
9 </image>
10 <view class="loadfail-img" v-else-if="isLoadError"></view>
11 <view :class="['loading-img',loadingMode]" v-show="!showImg&&!isLoadError"></view>
12
13 </view>
14 </template>
15 <script>
16 // 生成全局唯一id
17 function generateUUID() {
18     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
19         let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
20         return v.toString(16);
21     })
22 }
23 export default{
24 props:{
25 imageSrc:{
26 type: String,
27 },
28 mode:{
29 type: String,
30 },
31 scrollTop:{
32 type: Number,
33 },
34 loadingMode:{
35 type: String,
36 default:'looming-gray'
37 },
38 openTransition:{
39 type: Boolean,
40 default:true,
41 },
42 viewHeight:{
43 type:Number,
44 default() {
45 return uni.getSystemInfoSync().windowHeight;
46 }
47 }
48 },
49 watch:{
50 scrollTop(val){
51 this.onScroll(val)
52 }
53 },
54 data(){
55 return {
56 uid:'',
57 loadImg:false,
58 showImg:false,
59 isLoadError:false,
60 showTransition:false
61 }
62 },
63 methods:{
64 init(){
65 this.uid = 'uid-' + generateUUID();
66 this.$nextTick(this.onScroll)
67 },
68 handleImgLoad(e){
69 // console.log('success');
70 this.showImg = true;
71 // this.$nextTick(function(){
72 // this.showTransition = true
73 // })
74 setTimeout(()=>{
75 this.showTransition = true
76 },50)
77 },
78 handleImgError(e){
79 // console.log('fail');
80 this.isLoadError = true;
81 },
82 onScroll(scrollTop){
83 // 加载ing时才执行滚动监听判断是否可加载
84 if(this.loadImg || this.isLoadError) return;
85 const id = this.uid
86 const query = uni.createSelectorQuery().in(this);
87 query.select('#'+id).boundingClientRect(data => {
88 if(!data) return;
89 if(data.top - this.viewHeight<0){
90 this.loadImg = true;
91 }
92 }).exec()
93 },
94 },
95 mounted() {
96 this.init()
97 }
98 }
99 </script>
100
101 <style scoped>
102 /* 官方优化图片tips */
103 image{
104 will-change: transform
105 }
106 /* 渐变过渡效果处理 */
107 image.origin-img{
108 width: 100%;
109 height: 100%;
110 opacity: 0.3;
111 }
112 image.origin-img.show-transition{
113 transition: opacity 1.2s;
114 opacity: 1;
115 }
116 image.origin-img.no-transition{
117 opacity: 1;
118 }
119 /* 加载失败、加载中的占位图样式控制 */
120 .loadfail-img{
121 height: 100%;
122 background: url('~@/static/easy-loadimage/loadfail.png') no-repeat center;
123 background-size: 50%;
124 }
125 .loading-img{
126 height: 100%;
127 }
128 /* 转圈 */
129 .spin-circle{
130 background: url('~@/static/easy-loadimage/loading.gif') no-repeat center;
131 background-size: 100rpx;
132 }
133 /* 动态灰色若隐若现 */
134 .looming-gray{
135 animation: looming-gray 1s infinite linear;
136 background-color: #e3e3e3;
137 }
138 @keyframes looming-gray{
139 0% {background-color:#e3e3e3aa;}
140 50% {background-color:#e3e3e3;}
141 100% {background-color:#e3e3e3aa;}
142 }
143 /* 骨架屏1 */
144 .skeleton-1{
145 background-color: #e3e3e3;
146 background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
147 background-size: 100rpx 100%;
148 background-repeat: repeat-y;
149 background-position:0 0;
150 animation: skeleton-1 .6s infinite;
151 }
152 @keyframes skeleton-1 {
153 to {
154 background-position: 200% 0;
155 }
156 }
157 /* 骨架屏2 */
158 .skeleton-2{
159 background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%,#fefefe 100%);
160 background-size: 400% 400%;
161 background-position:0 0;
162 animation: skeleton-2 1.2s ease-in-out infinite;
163 }
164 @keyframes skeleton-2{
165 to {
166 background-position: -135% 0;
167 }
168 }
169 </style>
170
1 <template> 171
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <!-- 弹窗 --> 3 <!-- 弹窗 -->
4 <uni-popup ref="popup" type="center"> 4 <uni-popup ref="popup" type="center">
5 <!-- 给一个左边弹窗的样式 --> 5 <!-- 给一个左边弹窗的样式 -->
6 <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}"> 6 <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
7 <!-- 关闭弹窗按钮 --> 7 <!-- 关闭弹窗按钮 -->
8 <view class="closeBtn" @click="this.$refs.popup.close()"></view> 8 <view class="closeBtn" @click="this.$refs.popup.close()"></view>
9 <!-- 左 --> 9 <!-- 左 -->
10 <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> 10 <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
11 <!-- 右 --> 11 <!-- 右 -->
12 <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> 12 <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
13 </view> 13 </view>
14 </uni-popup> 14 </uni-popup>
15 <!-- 点击弹窗部分 --> 15 <!-- 点击弹窗部分 -->
16 <view class="header"> 16 <view class="header">
17 <view class="headerLeft" @click=changeTap(1)> 17 <view class="headerLeft" @click=changeTap(1)>
18 <text>如何查看验光单？</text> 18 <text>如何查看验光单？</text>
19 <image src="../../static/dataLook.png" mode="aspectFit"></image> 19 <image src="../../static/dataLook.png" mode="aspectFit"></image>
20 </view> 20 </view>
21 <view class="headerRight" @click=changeTap(0)> 21 <view class="headerRight" @click=changeTap(0)>
22 <text>如何查看眼镜框架？</text> 22 <text>如何查看眼镜框架？</text>
23 <image src="../../static/glassLook.png" mode="aspectFit"></image> 23 <image src="../../static/glassLook.png" mode="aspectFit"></image>
24 </view> 24 </view>
25 </view> 25 </view>
26 <!-- 数据展示部分 --> 26 <!-- 数据展示部分 -->
27 <view class="dataMenu"> 27 <view class="dataMenu">
28 <uni-collapse accordion="true"> 28 <uni-collapse accordion="true">
29 <view class="item" v-for="(loveItem,index) in loveList" :key="index" > 29 <view class="item" v-for="(loveItem,index) in loveList" :key="index" >
30 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> 30 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
31 <view class="loveDataInfo" @click="toNewData(2,index)"> 31 <view class="loveDataInfo" @click="toNewData(2,index)">
32 <view class="dataInfoItem"> 32 <view class="dataInfoItem">
33 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text> 33 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
34 </view> 34 </view>
35 <view class="dataInfoItem"> 35 <view class="dataInfoItem">
36 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text> 36 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
37 </view> 37 </view>
38 <view class="dataInfoItem"> 38 <view class="dataInfoItem">
39 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text> 39 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
40 </view> 40 </view>
41 <view class="dataInfoItem"> 41 <view class="dataInfoItem">
42 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text> 42 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
43 </view> 43 </view>
44 </view> 44 </view>
45 </uni-collapse-item> 45 </uni-collapse-item>
46 </view> 46 </view>
47 </uni-collapse> 47 </uni-collapse>
48 </view> 48 </view>
49 <view class="footer"> 49 <view class="footer">
50 <button class="btn" type="default" @click="toNewData(1)">新建验光单</button> 50 <button class="btn" type="default" @click="toNewData(1)">新建验光单</button>
51 </view> 51 </view>
52 </view> 52 </view>
53 </template> 53 </template>
54 54
55 <script> 55 <script>
56 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 56 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
57 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 57 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
58 import UniPopup from '@/components/UniPopup/uni-popup.vue' 58 import UniPopup from '@/components/UniPopup/uni-popup.vue'
59 import store from '@/store'; 59 import store from '@/store';
60 export default { 60 export default {
61 components: {UniCollapse,UniCollapseItem,UniPopup}, 61 components: {UniCollapse,UniCollapseItem,UniPopup},
62 data() { 62 data() {
63 return { 63 return {
64 whichTap:0 64 whichTap:0
65 }; 65 };
66 }, 66 },
67 onLoad: function(option) { 67 onLoad: function(option) {
68 //获取关心的人列表 68 //获取关心的人列表
69 store.dispatch('myLoveList/getLoveList', { 69 store.dispatch('myLoveList/getLoveList', {
70 uid: this.$store.state.user.userInfo.uid, 70 uid: this.$store.state.user.userInfo.uid,
71 }); 71 });
72 }, 72 },
73 computed:{ 73 computed:{
74 loveList() { 74 loveList() {
75 console.log(this.$store.state.myLoveList.loveList) 75 console.log(this.$store.state.myLoveList.loveList)
76 return this.$store.state.myLoveList.loveList || [] 76 return this.$store.state.myLoveList.loveList || []
77 }, 77 },
78 }, 78 },
79 methods:{ 79 methods:{
80 changeTap(item){ 80 changeTap(item){
81 this.whichTap = item 81 this.whichTap = item
82 this.$refs.popup.open() 82 this.$refs.popup.open()
83 }, 83 },
84 //给时间搞一个nice的格式 84 //给时间搞一个nice的格式
85 getRightTime(time){ 85 getRightTime(time){
86 //如果小于10 则返回'0'+m 86 //如果小于10 则返回'0'+m
87 // function add(m){return m<10?'0'+m:m} 87 // function add(m){return m<10?'0'+m:m}
88 //传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧 88 //传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
89 // const oldTime = (new Date(time)).getTime() 89 // const oldTime = (new Date(time)).getTime()
90 // const year = new Date(oldTime).getFullYear() 90 // const year = new Date(oldTime).getFullYear()
91 // const month = new Date(oldTime).getMonth()+1 91 // const month = new Date(oldTime).getMonth()+1
92 // const day = new Date(oldTime).getDate() 92 // const day = new Date(oldTime).getDate()
93 // const newTime = add(year)+'-'+add(month)+'-'+add(day) 93 // const newTime = add(year)+'-'+add(month)+'-'+add(day)
94 94
95 // console.log(newTime) 95 // console.log(newTime)
96 // return newTime.replace(/-/g, '/') 96 // return newTime.replace(/-/g, '/')
97 return time 97 return time
98 }, 98 },
99 getFirstName(name){ 99 getFirstName(name){
100 return name.substring(0,1) 100 return name.substring(0,1)
101 }, 101 },
102 toNewData(item,index){ 102 toNewData(item,index){
103 // const args={ 103 // const args={
104 // name:loveItem.name, 104 // name:loveItem.name,
105 // pd:loveItem.pd, 105 // pd:loveItem.pd,
106 // leftSph:loveItem.leftSph, 106 // leftSph:loveItem.leftSph,
107 // rightSph:loveItem.rightSph, 107 // rightSph:loveItem.rightSph,
108 // leftCyl:loveItem.leftCyl, 108 // leftCyl:loveItem.leftCyl,
109 // rightCyl:loveItem.rightCyl, 109 // rightCyl:loveItem.rightCyl,
110 // leftAxi:loveItem.leftAxi, 110 // leftAxi:loveItem.leftAxi,
111 // rightAxi:loveItem.rightAxi 111 // rightAxi:loveItem.rightAxi
112 // } 112 // }
113 uni.navigateTo({ 113 uni.navigateTo({
114 // kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单 114 // kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单
115 // name 表示修改的人名儿，pd瞳距 115 // name 表示修改的人名儿，pd瞳距
116 url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index 116 url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index
117 }) 117 })
118 } 118 }
119 } 119 }
120 } 120 }
121 </script> 121 </script>
122 122
123 <style lang="scss"> 123 <style lang="scss">
124 .wrap{ 124 .wrap{
125 min-height: 100vh; 125 min-height: 100vh;
126 width: 100%; 126 width: 100%;
127 background-color: #F2F2F2; 127 background-color: #F2F2F2;
128 .header{ 128 .header{
129 height: 304rpx; 129 height: 304rpx;
130 width: 100%; 130 width: 100%;
131 background-color: #FFFFFF; 131 background-color: #FFFFFF;
132 display: flex; 132 display: flex;
133 justify-content: space-around; 133 justify-content: space-around;
134 align-items: center; 134 align-items: center;
135 view{ 135 view{
136 height: 210rpx; 136 height: 210rpx;
137 width: 304rpx; 137 width: 304rpx;
138 background: #FDF7F5; 138 background: #FDF7F5;
139 border-radius: 4px; 139 border-radius: 4px;
140 border-radius: 4px; 140 border-radius: 4px;
141 display: flex; 141 display: flex;
142 flex-direction: column; 142 flex-direction: column;
143 align-items: center; 143 align-items: center;
144 justify-content: center; 144 justify-content: center;
145 text{ 145 text{
146 font-size: 12px; 146 font-size: 12px;
147 color: #333333; 147 color: #333333;
148 } 148 }
149 image{ 149 image{
150 height: 144rpx; 150 height: 144rpx;
151 width: 144rpx; 151 width: 144rpx;
152 } 152 }
153 } 153 }
154 } 154 }
155 .dataMenu{ 155 .dataMenu{
156 margin-top: 20rpx; 156 margin-top: 20rpx;
157 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 157 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
158 width: 100%; 158 width: 100%;
159 background-color: #FFFFFF; 159 background-color: #FFFFFF;
160 margin-bottom: 120rpx; 160 margin-bottom: 120rpx;
161 .item{ 161 .item{
162 padding: 0 40rpx; 162 padding: 0 40rpx;
163 .loveDataInfo{ 163 .loveDataInfo{
164 padding: 0 44rpx 0 70rpx; 164 padding: 0 44rpx 0 70rpx;
165 display: flex; 165 display: flex;
166 justify-content: space-around; 166 justify-content: space-around;
167 flex-direction: column; 167 flex-direction: column;
168 align-items: flex-start; 168 align-items: flex-start;
169 .dataInfoItem{ 169 .dataInfoItem{
170 font-size: 12px; 170 font-size: 12px;
171 color: #333333; 171 color: #333333;
172 margin-bottom: 34rpx; 172 margin-bottom: 34rpx;
173 text{ 173 text{
174 font-size: 12px; 174 font-size: 12px;
175 color: #2A2A2A; 175 color: #2A2A2A;
176 margin-right: 20rpx; 176 margin-right: 20rpx;
177 } 177 }
178 } 178 }
179 } 179 }
180 } 180 }
181 } 181 }
182 .footer{ 182 .footer{
183 width: 100%; 183 width: 100%;
184 position: fixed; 184 position: fixed;
185 bottom: 0; 185 bottom: 0;
186 left: 0; 186 left: 0;
187 .btn{ 187 .btn{
188 width: 100%; 188 width: 100%;
189 height: 112rpx; 189 height: 112rpx;
190 line-height: 112rpx; 190 line-height: 112rpx;
191 background: #FF6B4A; 191 background: #FF6B4A;
192 font-size: 16px; 192 font-size: 16px;
193 color: #FFFFFF; 193 color: #FFFFFF;
194 } 194 }
195 } 195 }
196 } 196 }
197 .popUpWrap{ 197 .popUpWrap{
198 height: 850rpx; 198 height: 850rpx;
199 width: 542rpx; 199 width: 542rpx;
200 background-color: #FFFFFF; 200 background-color: #FFFFFF;
201 border-radius: 4px; 201 border-radius: 4px;
202 border: 1px solid #979797; 202 border: 1px solid #979797;
203 .closeBtn{ 203 .closeBtn{
204 height: 28rpx; 204 height: 28rpx;
205 width: 28rpx; 205 width: 28rpx;
206 // border: 1px solid red; 206 // border: 1px solid red;
207 position: absolute; 207 position: absolute;
208 top: 20rpx; 208 top: 20rpx;
209 right: 20rpx; 209 right: 20rpx;
210 } 210 }
211 .glassInfo{ 211 .glassInfo{
212 height: 474rpx; 212 height: 474rpx;
213 width: 528rpx; 213 width: 528rpx;
214 } 214 }
215 .dataInfo{ 215 .dataInfo{
216 height: 850rpx; 216 height: 850rpx;
217 width: 542rpx; 217 width: 542rpx;
218 } 218 }
219 } 219 }
220 .popUpWrap1{ 220 .popUpWrap1{
221 height: 474rpx; 221 height: 474rpx;
222 width: 528rpx; 222 width: 528rpx;
223 border-radius: 4px; 223 border-radius: 4px;
224 border: 1px solid #979797; 224 border: 1px solid #979797;
225 } 225 }
226 226
227 </style> 227 </style>
228 228
src/pages/address/addressList.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view 3 <view
4 v-if="addressList.length !== 0" 4 v-if="addressList.length !== 0"
5 class="list" 5 class="list"
6 > 6 >
7 <view 7 <view
8 v-for="(item, index) in addressList" 8 v-for="(item, index) in addressList"
9 :key="index" 9 :key="index"
10 class="order-user" 10 class="order-user"
11 @tap="toOrder(item.add_id)" 11 @tap="toOrder(item.add_id)"
12 > 12 >
13 <view class="order-user-head"> 13 <view class="order-user-head">
14 <view class="name"> 14 <view class="name">
15 <view 15 <view
16 v-if="item.default === '1'" 16 v-if="item.default === '1'"
17 class="default" 17 class="default"
18 ><text>默认</text></view>{{item.name}} 18 ><text>默认</text></view>{{item.name}}
19 </view> 19 </view>
20 <text class="mobile">{{item.mobile}}</text> 20 <text class="mobile">{{item.mobile}}</text>
21 </view> 21 </view>
22 <view class="order-user-body"> 22 <view class="order-user-body">
23 <image src="../../static/myorder-paying-location.png"></image> 23 <image src="../../static/myorder-paying-location.png"></image>
24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> 24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
25 </view> 25 </view>
26 <image 26 <image
27 @tap="toEditAddress(item.add_id)" 27 @tap="toEditAddress(item.add_id)"
28 v-if="item.default === '1'" 28 v-if="item.default === '1'"
29 class="arrow" 29 class="arrow"
30 src="../../static/right.png" 30 src="../../static/right.png"
31 ></image> 31 ></image>
32 <image 32 <image
33 @tap="toEditAddress(item.add_id)" 33 @tap="toEditAddress(item.add_id)"
34 v-else 34 v-else
35 class="arrow pen" 35 class="arrow pen"
36 src="../../static/icon-pen.png" 36 src="../../static/icon-pen.png"
37 ></image> 37 ></image>
38 </view> 38 </view>
39 </view> 39 </view>
40 <view 40 <view
41 v-else 41 v-else
42 class="empty" 42 class="empty"
43 > 43 >
44 暂无收货地址 44 暂无收货地址
45 </view> 45 </view>
46 <button @tap="toAddAddress" class="add">新建收货地址</button> 46 <button @tap="toAddAddress" class="add">新建收货地址</button>
47 </view> 47 </view>
48 </template> 48 </template>
49 49
50 <script> 50 <script>
51 import store from '@/store' 51 import store from '@/store'
52 export default { 52 export default {
53 data () { 53 data () {
54 return {} 54 return {}
55 }, 55 },
56 computed: { 56 computed: {
57 addressList () { 57 addressList () {
58 return this.$store.state.address.list 58 return this.$store.state.address.list
59 } 59 }
60 }, 60 },
61 onLoad ({ edit }) { 61 onLoad ({ edit }) {
62 if (edit) { 62 if (edit) {
63 this.edit = true 63 this.edit = true
64 } 64 }
65 store.dispatch('address/list') 65 store.dispatch('address/list')
66 }, 66 },
67 methods: { 67 methods: {
68 toAddAddress() { 68 toAddAddress() {
69 console.log('aaaaa-a') 69 console.log('aaaaa-a')
70 uni.navigateTo({ 70 uni.navigateTo({
71 url: 'addAddress', 71 url: 'addAddress',
72 fail: (error) => { 72 fail: (error) => {
73 console.error('跳转出现错误', error) 73 console.error('跳转出现错误', error)
74 } 74 }
75 }) 75 })
76 }, 76 },
77 toEditAddress (addId) { 77 toEditAddress (addId) {
78 console.log('addId', addId) 78 console.log('addId', addId)
79 uni.navigateTo({ 79 uni.navigateTo({
80 url: `addAddress?addId=${addId}`, 80 url: `addAddress?addId=${addId}`,
81 fail: (error) => { 81 fail: (error) => {
82 console.error('跳转出现错误', error) 82 console.error('跳转出现错误', error)
83 } 83 }
84 }) 84 })
85 }, 85 },
86 toOrder (addId) { 86 toOrder (addId) {
87 if (this.edit) { 87 if (this.edit) {
88 uni.navigateTo({ 88 uni.navigateTo({
89 url: `../confirmOrder/confirmOrder?addressId=${addId}`, 89 url: `../confirmOrder/confirmOrder?addressId=${addId}`,
90 fail: (error) => { 90 fail: (error) => {
91 console.error('跳转出现错误', error) 91 console.error('跳转出现错误', error)
92 } 92 }
93 }) 93 })
94 } 94 }
95 } 95 }
96 } 96 }
97 } 97 }
98 </script> 98 </script>
99 99
100 <style lang="scss"> 100 <style lang="scss">
101 .content { 101 .content {
102 min-height: 100vh; 102 min-height: 100vh;
103 background-color: #f2f2f2; 103 background-color: #f2f2f2;
104 padding-top: 20rpx; 104 padding-top: 20rpx;
105 padding-bottom: 112rpx; 105 padding-bottom: 112rpx;
106 .order-user { 106 .order-user {
107 width: 670rpx; 107 width: 670rpx;
108 height: 228rpx; 108 height: 228rpx;
109 background: #ffffff; 109 background: #ffffff;
110 border-radius: 14rpx; 110 border-radius: 14rpx;
111 margin: 0 auto; 111 margin: 0 auto;
112 margin-bottom: 20rpx; 112 margin-bottom: 20rpx;
113 position: relative; 113 position: relative;
114 .order-user-head { 114 .order-user-head {
115 display: flex; 115 display: flex;
116 height: 108rpx; 116 height: 108rpx;
117 width: 100%; 117 width: 100%;
118 align-items: center; 118 align-items: center;
119 margin-left: 126rpx; 119 margin-left: 126rpx;
120 .name { 120 .name {
121 display: flex; 121 display: flex;
122 justify-content: space-between; 122 justify-content: space-between;
123 font-size: 14px; 123 font-size: 14px;
124 color: #333333; 124 color: #333333;
125 letter-spacing: -0.26px; 125 letter-spacing: -0.26px;
126 margin-right: 20rpx; 126 margin-right: 20rpx;
127 .default { 127 .default {
128 height: 40rpx; 128 height: 40rpx;
129 width: 80rpx; 129 width: 80rpx;
130 background-color: #4a90e2; 130 background-color: #4a90e2;
131 border-radius: 13px; 131 border-radius: 13px;
132 border-radius: 13px; 132 border-radius: 13px;
133 text-align: center; 133 text-align: center;
134 margin-right: 20rpx; 134 margin-right: 20rpx;
135 text { 135 text {
136 display: flex;
137 justify-content: center;
138 align-items: center;
136 display: flex; 139 font-size: 12px;
137 justify-content: center; 140 color: #ffffff;
138 align-items: center; 141 letter-spacing: -0.23px;
139 font-size: 12px; 142 }
140 color: #ffffff; 143 }
141 letter-spacing: -0.23px; 144 }
142 } 145 .mobile {
143 } 146 font-size: 14px;
144 } 147 color: #999999;
145 .mobile { 148 letter-spacing: -0.26px;
146 font-size: 14px; 149 }
147 color: #999999; 150 }
148 letter-spacing: -0.26px; 151 .order-user-body {
149 } 152 display: flex;
150 } 153 width: 100%;
151 .order-user-body { 154 image {
152 display: flex; 155 width: 24px;
153 width: 100%; 156 height: 26px;
154 image { 157 margin: 12rpx 32rpx 0 40rpx;
155 width: 24px; 158 }
156 height: 26px; 159 .address {
157 margin: 12rpx 32rpx 0 40rpx; 160 font-weight: bold;
158 } 161 font-size: 14px;
159 .address { 162 color: #333333;
160 font-weight: bold; 163 letter-spacing: -0.26px;
161 font-size: 14px; 164 }
162 color: #333333; 165 }
163 letter-spacing: -0.26px; 166 .arrow {
164 } 167 width: 12px;
165 } 168 height: 12px;
166 .arrow { 169 position: absolute;
167 width: 12px; 170 right: 40rpx;
168 height: 12px; 171 bottom: 104rpx;
169 position: absolute; 172 }
170 right: 40rpx; 173 }
171 bottom: 104rpx; 174 .empty {
172 } 175 color: #666;
173 } 176 font-size: 16px;
174 .empty { 177 text-align: center;
175 color: #666; 178 padding-top: 30vh;
176 font-size: 16px; 179 }
177 text-align: center; 180 .add {
178 padding-top: 30vh; 181 position: fixed;
179 } 182 bottom: 0;
180 .add { 183 left: 0;
181 position: fixed; 184 height: 112rpx;
182 bottom: 0; 185 width: 100%;
183 left: 0; 186 background-color: #ff6b4a;
184 height: 112rpx; 187 display: flex;
185 width: 100%; 188 justify-content: center;
186 background-color: #ff6b4a; 189 align-items: center;
187 display: flex; 190 font-size: 16px;
188 justify-content: center; 191 color: #ffffff;
189 align-items: center; 192 letter-spacing: -0.3px;
190 font-size: 16px; 193 }
191 color: #ffffff; 194 }
192 letter-spacing: -0.3px; 195 </style>
193 } 196
src/pages/cart/cart.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view 9 <view
10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 10 v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11 @touchstart="pChange(pIsoPen)" 11 @touchstart="pChange(pIsoPen)"
12 > 12 >
13 <span class="correct"></span> 13 <span class="correct"></span>
14 </view> 14 </view>
15 <image 15 <image
16 src="../../static/store.png"
17 mode="aspectFill"
18 ></image>
19 <text>非常戴镜</text>
20 </view>
21 <view
22 class="cardBody"
23 v-for="(item,index) in cartList"
24 :key="index"
25 @longpress="delCart(item.cart_id,index)"
26 >
27 <view
28 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29 @touchstart="Change(childIsOpen[index],index)"
30 >
31 <span class="correct"></span>
32 </view>
33 <view class="imageWrap">
34 <image
35 :src="item.img_index_url"
36 mode="aspectFit"
37 style="width: 188rpx;height: 168rpx;"
38 ></image>
39 </view>
40 <view class="goodInfo">
41 <!-- <view class="imageWrap">
42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43 </view> -->
44 <view class="infoRight">
45 <view
46 class="goodName"
47 @tap="toGoods(item.pid,item.sk_id)"
48 >{{item.p_name}}</view>
49 <!-- <view class="describ"> -->
50 <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;">
51 <uni-collapse-item
52 showAnimation='true'
53 :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'">
54 <text class="describ">
55 <block
56 v-for="tag in item.tag.prod_tag_fun"
57 :key="tag.value"
58 >
59 {{tag.label+`&nbsp;&nbsp;`}}
60 </block>
61 </text>
62 <!-- <text>
63 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
64 {{tag.label+`&nbsp;&nbsp;`}}
65 </block>
66 </text> -->
67 </uni-collapse-item>
68 </uni-collapse>
69 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
70 <!-- </view> -->
71 <view class="priceBox">
72 <view class="price">￥{{item.nowPrice*item.num}}</view>
73 <text class="maxCount">(限购{{maxCount}}副)</text>
74 <view class="counter">
75 <view
76 class="btn"
77 disabled="this.addDisabled"
78 type="default"
79 @tap="counter(index,false,item)"
80 >-</view>
81 <text>{{item.num}}</text>
82 <view
83 class="btn"
84 disabled="this.desDisabled"
85 type="default"
86 @tap="counter(index,true,item)"
87 >+</view>
88 </view>
89 </view>
90 </view>
91 </view>
92 </view>
93 </view>
94 </block>
95 <view class="footer">
96 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
97 <view class="footerRight">
98 <navigator
99 url="/pages/confirmOrder/confirmOrder"
100 hover-class="navigator-hover"
101 >
102 <view class="paybtn">立即结算</view>
103 </navigator>
104 </view>
105 </view>
16 src="../../static/store.png" 106
17 mode="aspectFill" 107 </view>
18 ></image>
19 <text>非常戴镜</text>
20 </view>
21 <view
22 class="cardBody"
23 v-for="(item,index) in cartList"
24 :key="index"
25 @longpress="delCart(item.cart_id,index)"
26 >
27 <view
28 v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
29 @touchstart="Change(childIsOpen[index],index)"
30 >
31 <span class="correct"></span>
32 </view>
33 <view class="imageWrap">
34 <image
35 :src="item.img_index_url"
36 mode="aspectFit"
37 style="width: 188rpx;height: 168rpx;"
38 ></image>
39 </view>
40 <view class="goodInfo">
41 <!-- <view class="imageWrap">
42 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43 </view> -->
44 <view class="infoRight">
45 <view
46 class="goodName"
47 @tap="toGoods(item.pid,item.sk_id)"
48 >{{item.p_name}}</view>
49 <!-- <view class="describ"> -->
50 <uni-collapse accordion="true" style="justify-content: space-around;width: 196px;">
51 <uni-collapse-item
52 showAnimation='true'
53 :title="item.tag.prod_tag_fun[0].label&&item.tag.prod_tag_fun[1].label?item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'...':'暂无数据'">
54 <text class="describ">
55 <block
56 v-for="tag in item.tag.prod_tag_fun"
57 :key="tag.value"
58 >
59 {{tag.label+`&nbsp;&nbsp;`}}
60 </block>
61 </text>
62 <!-- <text>
63 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
64 {{tag.label+`&nbsp;&nbsp;`}}
65 </block>
66 </text> -->
67 </uni-collapse-item>
68 </uni-collapse>
69 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
70 <!-- </view> -->
71 <view class="priceBox">
72 <view class="price">￥{{item.nowPrice*item.num}}</view>
73 <text class="maxCount">(限购{{maxCount}}副)</text>
74 <view class="counter">
75 <view
76 class="btn" 108 </template>
77 disabled="this.addDisabled" 109
78 type="default" 110 <script>
79 @tap="counter(index,false,item)" 111 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 >-</view> 112 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
81 <text>{{item.num}}</text> 113 import store from '@/store'
82 <view 114
83 class="btn" 115 export default {
84 disabled="this.desDisabled" 116 components: { UniCollapse, UniCollapseItem },
85 type="default" 117 data() {
86 @tap="counter(index,true,item)" 118 return {
87 >+</view> 119 totalPrice: 0,
88 </view> 120 pIsoPen: false,
89 </view> 121 // childIsOpen:[],
90 </view> 122 maxCount: 20,
91 </view> 123 }
92 </view> 124 },
93 </view> 125 computed: {
94 </block> 126
95 <view class="footer"> 127 cartList() {
96 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 128 // console.log('cart-list', this.$store.state.cart.cartList);
129 this.totalPrice=0
97 <view class="footerRight"> 130 return this.$store.state.cart.cartList
98 <navigator 131 },
99 url="/pages/confirmOrder/confirmOrder" 132 childIsOpen() {
100 hover-class="navigator-hover" 133 const temp = []
101 > 134 temp.length = this.$store.state.cart.cartList.length
102 <view class="paybtn">立即结算</view> 135 for (let i = 0; i < temp.length; i++) {
103 </navigator> 136 temp[i] = false
104 </view> 137 }
105 </view> 138 console.log('this.childisOPne===>', temp)
106 139 return temp
107 </view> 140 },
108 </template> 141 },
109 142 onLoad: function() {
110 <script> 143 // store.dispatch('cart/addCart', {
111 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 144 // uid: this.$store.state.user.userInfo.uid,
112 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 145 // openid: this.$store.state.user.userInfo.openid,
113 import store from '@/store' 146 // mp_id: 7,
114 147 // sk_id: 7,
115 export default { 148 // num: 1,
116 components: { UniCollapse, UniCollapseItem }, 149 // pid: 8,
117 data() { 150 // price: 128,
118 return { 151 // checkedSKU:{},
119 totalPrice: 0, 152 // })
120 pIsoPen: false, 153 store.dispatch('cart/getCartList', {
121 // childIsOpen:[], 154 uid: this.$store.state.user.userInfo.uid, // 用户id
122 maxCount: 20, 155 })
123 } 156 },
124 },
125 computed: { 157 methods: {
126
127 cartList() { 158 toGoods(id, sk_id) {
128 // console.log('cart-list', this.$store.state.cart.cartList); 159 console.log('cart-list', this.$store.state.cart.cartList)
129 this.totalPrice=0 160 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id)
130 return this.$store.state.cart.cartList 161 uni.navigateTo({
131 }, 162 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
132 childIsOpen() { 163 success: res => {},
133 const temp = [] 164 fail: () => {},
134 temp.length = this.$store.state.cart.cartList.length 165 complete: () => {},
135 for (let i = 0; i < temp.length; i++) { 166 })
136 temp[i] = false 167 },
137 }
138 console.log('this.childisOPne===>', temp) 168 counter(index, isadd, item) {
139 return temp 169 // console.log('===>>counter ===>num',num)
140 }, 170 // console.log('===>>counter ===>isadd',isadd)
141 }, 171 console.log('item=====>', item)
142 onLoad: function() { 172 console.log('num=====>', item.num)
143 // store.dispatch('cart/addCart', { 173 const nums = parseInt(item.num)
144 // uid: this.$store.state.user.userInfo.uid, 174 if (isadd) {
145 // openid: this.$store.state.user.userInfo.openid, 175 if (nums >= this.maxCount) {
146 // mp_id: 7, 176 this.addDisabled = true
147 // sk_id: 7, 177 } else {
148 // num: 1, 178 this.addDisabled = true
149 // pid: 8, 179 // 修改num
150 // price: 128, 180 if (this.childIsOpen[index]) {
151 // checkedSKU:{}, 181 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice
152 // }) 182 }
153 store.dispatch('cart/getCartList', { 183 store.dispatch('cart/modiCart', {
154 uid: this.$store.state.user.userInfo.uid, // 用户id 184 uid: this.$store.state.user.userInfo.uid,
155 }) 185 openid: this.$store.state.user.userInfo.openid,
156 }, 186 mp_id: item.mp_id,
157 methods: { 187 sk_id: item.sk_id,
158 toGoods(id, sk_id) { 188 price: item.nowPrice,
159 console.log('cart-list', this.$store.state.cart.cartList) 189 pid: item.pid,
160 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) 190 num: nums + 1,
161 uni.navigateTo({ 191 cart_id: item.cart_id,
162 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, 192 args: {
163 success: res => {}, 193 index: index,
164 fail: () => {}, 194 isadd: isadd,
165 complete: () => {}, 195 },
166 }) 196 })
167 }, 197 this.addDisabled = false
168 counter(index, isadd, item) { 198 }
169 // console.log('===>>counter ===>num',num) 199 } else {
170 // console.log('===>>counter ===>isadd',isadd) 200 if (nums <= 1) {
171 console.log('item=====>', item) 201 this.desDisabled = true
172 console.log('num=====>', item.num) 202 } else {
173 const nums = parseInt(item.num) 203 this.desDisabled = false
174 if (isadd) { 204 // post 请求修改相关参数
175 if (nums >= this.maxCount) { 205 if (this.childIsOpen[index]) {
176 this.addDisabled = true 206 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice
177 } else { 207 }
178 this.addDisabled = true 208 store.dispatch('cart/modiCart', {
179 // 修改num 209 uid: this.$store.state.user.userInfo.uid,
180 if (this.childIsOpen[index]) { 210 openid: this.$store.state.user.userInfo.openid,
181 this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice 211 mp_id: item.mp_id,
182 } 212 sk_id: item.sk_id,
183 store.dispatch('cart/modiCart', { 213 price: item.nowPrice,
184 uid: this.$store.state.user.userInfo.uid, 214 pid: item.pid,
185 openid: this.$store.state.user.userInfo.openid, 215 num: nums - 1,
186 mp_id: item.mp_id, 216 cart_id: item.cart_id,
187 sk_id: item.sk_id, 217 args: {
188 price: item.nowPrice, 218 index: index,
189 pid: item.pid, 219 isadd: isadd,
190 num: nums + 1, 220 },
191 cart_id: item.cart_id, 221 })
192 args: { 222 this.desDisabled = true
193 index: index, 223 }
194 isadd: isadd, 224 }
195 }, 225 // store.dispatch('cart/getCartList', {
196 }) 226 // uid: this.$store.state.user.userInfo.uid // 用户id
197 this.addDisabled = false 227 // })
198 } 228 },
199 } else {
200 if (nums <= 1) { 229 Change(isopen, indexC) {
201 this.desDisabled = true 230 // console.log('lalla===>',isopen)
202 } else { 231 this.childIsOpen[indexC] = !isopen
203 this.desDisabled = false 232 if (!isopen) {
204 // post 请求修改相关参数 233 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
205 if (this.childIsOpen[index]) { 234 } else {
206 this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice 235 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
207 } 236 }
208 store.dispatch('cart/modiCart', { 237 let m = true
209 uid: this.$store.state.user.userInfo.uid, 238 for (let i = 0; i < this.childIsOpen.length; i++) {
210 openid: this.$store.state.user.userInfo.openid, 239 m = m & this.childIsOpen[i]
211 mp_id: item.mp_id, 240 }
212 sk_id: item.sk_id, 241 if (m === 1) {
213 price: item.nowPrice, 242 this.pIsoPen = true
214 pid: item.pid, 243 } else {
215 num: nums - 1, 244 this.pIsoPen = false
216 cart_id: item.cart_id, 245 }
217 args: { 246 },
218 index: index, 247 pChange(isopen) {
219 isadd: isadd, 248 this.pIsoPen = !isopen
220 }, 249 for (let i = 0; i < this.childIsOpen.length; i++) {
221 }) 250 this.childIsOpen[i] = !isopen
222 this.desDisabled = true 251 }
223 } 252 if (this.pIsoPen) {
224 } 253 // 计算总价逻辑
225 // store.dispatch('cart/getCartList', { 254 if (this.childIsOpen.length !== 0) {
226 // uid: this.$store.state.user.userInfo.uid // 用户id 255 for (let i = 0; i < this.childIsOpen.length; i++) {
227 // }) 256 if (this.childIsOpen[i]) {
228 }, 257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
229 Change(isopen, indexC) { 258 }
230 // console.log('lalla===>',isopen) 259 }
231 this.childIsOpen[indexC] = !isopen 260 }
232 if (!isopen) { 261 } else {
233 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 262 this.totalPrice = 0
234 } else { 263 }
235 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) 264 },
236 } 265 delCart(cart_id, index) {
237 let m = true 266 // console.log('userInfo',this.$store.state.user.userInfo)
238 for (let i = 0; i < this.childIsOpen.length; i++) { 267 cart_id = parseInt(cart_id)
239 m = m & this.childIsOpen[i] 268 // console.log('delcart------>cart_id',cart_id)
240 } 269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
241 if (m === 1) { 270 // console.log('delcart======>index',index)
242 this.pIsoPen = true 271 uni.showModal({
243 } else { 272 title: '是否删除该商品',
244 this.pIsoPen = false 273 // content: '是否删除该商品',
245 } 274 success: function (res) {
246 }, 275 if (res.confirm) {
247 pChange(isopen) { 276 if (this.childIsOpen[index]) {
248 this.pIsoPen = !isopen 277 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num)
249 for (let i = 0; i < this.childIsOpen.length; i++) { 278 }
250 this.childIsOpen[i] = !isopen 279 console.log('index===>',index)
251 } 280 store.dispatch('cart/delCart', {
252 if (this.pIsoPen) { 281 uid: this.$store.state.user.userInfo.uid,
253 // 计算总价逻辑 282 openid: this.$store.state.user.userInfo.openid,
254 if (this.childIsOpen.length !== 0) { 283 cart_id: cart_id, // 要修改的购物车id
255 for (let i = 0; i < this.childIsOpen.length; i++) { 284 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
256 if (this.childIsOpen[i]) { 285 })
257 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) 286 }
258 } 287 }.bind(this),
259 } 288 })
260 } 289 },
261 } else { 290 },
262 this.totalPrice = 0 291 }
263 } 292 </script>
264 }, 293
265 delCart(cart_id, index) { 294 <style lang="scss">
266 // console.log('userInfo',this.$store.state.user.userInfo) 295 .content {
267 cart_id = parseInt(cart_id) 296 min-height: 100vh;
268 // console.log('delcart------>cart_id',cart_id) 297 background-color: #f2f2f2;
269 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 298 display: flex;
270 // console.log('delcart======>index',index) 299 flex-direction: column;
271 uni.showModal({ 300 align-items: center;
272 title: '是否删除该商品', 301 justify-content: space-between;
273 // content: '是否删除该商品', 302 padding: 20rpx 40rpx;
274 success: function (res) { 303 box-sizing: border-box;
275 if (res.confirm) { 304
276 if (this.childIsOpen[index]) { 305 .partentCheck {
277 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[index].nowPrice*this.$store.state.cart.cartList[index].num) 306 width: 16px;
278 } 307 height: 16px;
279 console.log('index===>',index) 308 border-radius: 22px;
280 store.dispatch('cart/delCart', { 309 border: 1px solid #cfcfcf;
281 uid: this.$store.state.user.userInfo.uid, 310 background-color: #ffffff;
282 openid: this.$store.state.user.userInfo.openid, 311 margin: 24rpx 12rpx 24rpx 24rpx;
283 cart_id: cart_id, // 要修改的购物车id 312 }
284 arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 313 .partentChecked {
285 }) 314 width: 18px;
286 } 315 height: 18px;
287 }.bind(this), 316 border-radius: 22px;
288 }) 317 background-color: #ff6b4a;
289 }, 318 margin: 24rpx 12rpx 24rpx 24rpx;
290 }, 319 .correct {
291 } 320 display: inline-block;
292 </script> 321 position: relative;
293 322 width: 10rpx;
294 <style lang="scss"> 323 height: 2rpx;
295 .content { 324 background: #ffffff;
296 min-height: 100vh; 325 line-height: 0;
297 background-color: #f2f2f2; 326 font-size: 0;
298 display: flex; 327 position: relative;
299 flex-direction: column; 328 top: -7px;
300 align-items: center; 329 left: 4px;
301 justify-content: space-between; 330 -webkit-transform: rotate(45deg);
302 padding: 20rpx 40rpx; 331 }
303 box-sizing: border-box; 332 .correct:after {
304 333 content: "/";
305 .partentCheck { 334 display: block;
306 width: 16px; 335 width: 16rpx;
307 height: 16px; 336 height: 2rpx;
308 border-radius: 22px; 337 background: #ffffff;
309 border: 1px solid #cfcfcf; 338 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
310 background-color: #ffffff; 339 }
311 margin: 24rpx 12rpx 24rpx 24rpx; 340 }
312 }
313 .partentChecked {
314 width: 18px;
315 height: 18px;
316 border-radius: 22px;
317 background-color: #ff6b4a;
318 margin: 24rpx 12rpx 24rpx 24rpx;
319 .correct {
320 display: inline-block;
321 position: relative;
322 width: 10rpx;
323 height: 2rpx;
324 background: #ffffff;
325 line-height: 0;
326 font-size: 0;
327 position: relative;
328 top: -7px;
329 left: 4px;
330 -webkit-transform: rotate(45deg);
331 }
332 .correct:after {
333 content: "/";
334 display: block;
335 width: 16rpx;
336 height: 2rpx;
337 background: #ffffff;
338 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
339 }
340 }
341
342 .card {
343 background-color: #ffffff;
344 border-radius: 16rpx;
345 box-sizing: border-box;
346 padding: 36rpx 36rpx 36rpx 18rpx;
347 display: flex;
348 flex-direction: column;
349 align-items: center;
350 justify-content: space-between;
351 margin-bottom: 180rpx;
352 .cardHeader {
353 width: 100%;
354 height: 36rpx;
355 display: flex;
356 align-items: center;
357 justify-content: flex-start;
358 margin-bottom: 20rpx;
359 image {
360 height: 32rpx;
361 width: 32rpx;
362 padding-left: 6px;
363 padding-right: 10px;
364 }
365 text {
366 // font-family: PingFangSC-Regular;
367 font-size: 14px;
368 color: #333333;
369 letter-spacing: -0.26px;
370 }
371 }
372 .cardBody {
373 width: 100%;
374 min-height: 300rpx;
375 display: flex;
376 align-items: center;
377 justify-content: space-between;
378 .goodInfo {
379 width: 390rpx;
380 display: flex;
381 flex-direction: row;
382 justify-content: flex-start;
383 padding-left: 6px;
384
385 .imageWrap {
386 height: 188rpx;
387 width: 188rpx;
388 margin-right: 28rpx;
389
390 image {
391 border-radius: 4px;
392 height: 188rpx;
393 width: 188rpx;
394 }
395 }
396 .infoRight {
397 display: flex;
398 flex-direction: column;
399 align-items: flex-start;
400 justify-content: space-between;
401 min-height: 240rpx;
402 .goodName {
403 display: -webkit-box;
404 -webkit-box-orient: vertical;
405 -webkit-line-clamp: 2;
406 text-align: justify;
407 overflow: hidden;
408 font-size: 28rpx;
409 color: #333333;
410 }
411 .describ {
412 width: 100%;
413 // min-height: 80rpx;
414 // box-sizing: border-box;
415 // padding: 10rpx;
416 font-size: 20rpx;
417 letter-spacing: -0.23px;
418 text-align: justify;
419 color: #999999;
420 // background: #F9F9F9;
421 // display: flex;
422 // justify-content: center;
423 // align-items: center;
424 // text{
425 // text-overflow: -o-ellipsis-lastline;
426 // overflow: hidden;
427 // text-overflow: ellipsis;
428 // display: -webkit-box;
429 // -webkit-line-clamp: 2;
430 // line-clamp: 2;
431 // -webkit-box-orient: vertical;
432 // }
433 // .icon {
434 // width: 0;
435 // height: 0;
436 // border-left: 5px transparent;
437 // border-right: 5px transparent;
438 // border-top: 5px #979797;
439 // border-bottom: 0 transparent;
440 // border-style: solid;
441 // position: relative;
442 // margin-left: 10px;
443 // // transform: scaleY(-1);
444 // }
445 // .icon::after{
446 // content: '';
447 // position: absolute;
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 mode="aspectFill"
42 mode="aspectFill" 43 ></image>
43 ></image> 44 </view>
44 </view> 45 <view class="content">
45 <view class="content"> 46 <view class="orderInfo">
46 <view class="orderInfo"> 47 <view class="title">
47 <view class="title"> 48 <image
48 <image 49 src="../../static/store.png"
49 src="../../static/store.png" 50 mode="aspectFill"
50 mode="aspectFill" 51 style="width: 40rpx;height: 40rpx;"
51 style="width: 40rpx;height: 40rpx;" 52 ></image>
52 ></image> 53 <text>非常戴镜</text>
53 <text>非常戴镜</text> 54 </view>
54 </view> 55 <view class="infoBox">
55 <view class="infoBox"> 56 <view class="infoTop">
56 <view class="infoTop"> 57 <image
57 <image 58 :src="goodInfo.img_index_url"
58 :src="goodInfo.img_index_url" 59 mode="aspectFill"
59 mode="aspectFill" 60 ></image>
60 ></image> 61 <view class="infoRight">
61 <view class="infoRight"> 62 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 <text class="goodName">商品名称商品名称商品名称名称名称</text> 63 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 <text class="remarks">支持7天无理由退货 顺丰发货</text> 64 <view class="priceBox">
64 <view class="priceBox"> 65 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
65 <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost"> 66 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
66 ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}} 67 </text></view>
67 </text></view> 68 <view class="counter">
68 <view class="counter"> 69 <view
69 <view 70 class="btn"
70 class="btn" 71 disabled="this.disabled"
71 disabled="this.disabled" 72 type="default"
72 type="default" 73 @click="counter(false)"
73 @click="counter(false)" 74 >-</view>
74 >-</view> 75 <text>{{count}}</text>
75 <text>{{count}}</text> 76 <view
76 <view 77 class="btn"
77 class="btn" 78 type="default"
78 type="default" 79 @click="counter(true)"
79 @click="counter(true)" 80 >+</view>
80 >+</view> 81 </view>
81 </view> 82 </view>
82 </view> 83 </view>
83 </view> 84 </view>
84 </view> 85 <view class="infoBottom">
85 <view class="infoBottom"> 86 <view class="norm">规格 <text>
86 <view class="norm">规格 <text> 87 <!-- 长度超出变省略号未做 -->
87 <!-- 长度超出变省略号未做 --> 88 <block
88 <block 89 v-for="(item, index) in current"
89 v-for="(item, index) in current" 90 :key="index"
90 :key="index" 91 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
91 >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block> 92 </block>
92 </block> 93 </text></view>
93 </text></view> 94 <view class="shippingMethod">配送方式 <text>快递</text></view>
94 <view class="shippingMethod">配送方式 <text>快递</text></view> 95 <view class="message">买家留言
95 <view class="message">买家留言 96 <input
96 <input 97 type="text"
97 type="text" 98 :value="note"
98 :value="note" 99 placeholder="建议提前协商(50字以内)"
99 placeholder="建议提前协商(50字以内)" 100 />
100 /> 101 </view>
101 </view> 102 </view>
102 </view> 103 </view>
103 </view> 104 </view>
104 </view> 105 <view class="payWay">
105 <view class="payWay"> 106 <view class="item">
106 <view class="item"> 107 <text>支付方式</text>
107 <text>支付方式</text> 108 <view class="itemRight">
108 <view class="itemRight"> 109 <view class="rightText">
109 <view class="rightText"> 110 <view class="choosePayWay">
110 <view class="choosePayWay"> 111 <image
111 <image 112 src="../../static/chat_logo.png"
112 src="../../static/chat_logo.png" 113 mode="aspectFill"
113 mode="aspectFill" 114 ></image>
114 ></image> 115 <text>微信支付</text>
115 <text>微信支付</text> 116 </view>
116 </view> 117 <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->
117 <!-- <view class="randomSubstraction">最高随机立减￥99</view> --> 118 </view>
118 </view> 119 <!-- <image
119 <!-- <image 120 src="../../static/right.png"
120 src="../../static/right.png" 121 mode="aspectFill"
121 mode="aspectFill" 122 ></image> -->
122 ></image> --> 123 </view>
123 </view> 124 </view>
124 </view> 125 <!-- <view class="item">
125 <!-- <view class="item"> 126 <text>优惠券</text>
126 <text>优惠券</text> 127 <view class="itemRight">
127 <view class="itemRight"> 128 <view class="rightText">
128 <view class="rightText"> 129 <view class="chooseOffers">
129 <view class="chooseOffers"> 130 <text>-￥70.00</text>
130 <text>-￥70.00</text> 131 </view>
131 </view> 132 <view class="preferentialWay">最大优惠</view>
132 <view class="preferentialWay">最大优惠</view> 133 </view>
133 </view> 134 <image
134 <image 135 src="../../static/right.png"
135 src="../../static/right.png" 136 mode="aspectFill"
136 mode="aspectFill" 137 ></image>
137 ></image> 138 </view>
138 </view> 139 </view> -->
139 </view> --> 140 <view class="item">
140 <view class="item"> 141 <text>运费</text>
141 <text>运费</text> 142 <view class="itemRight">
142 <view class="itemRight"> 143 <view class="freight">免运费</view>
143 <view class="freight">免运费</view> 144 </view>
144 </view> 145 </view>
145 </view> 146 <view class="item">
146 <view class="item"> 147 <text>合计</text>
147 <text>合计</text> 148 <view class="itemRight">
148 <view class="itemRight"> 149 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
149 <view class="total">¥{{Number(skuInfo.real_price) * count}}</view> 150 </view>
150 </view> 151 </view>
151 </view> 152 </view>
152 </view> 153 <!--
153 <!-- 154 <view class="checkBox">
154 <view class="checkBox"> 155 <checkbox-group>
155 <checkbox-group> 156 <label>
156 <label> 157 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
157 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 158 </label>
158 </label> 159 </checkbox-group>
159 </checkbox-group> 160 </view> -->
160 </view> --> 161 </view>
162 <view class="last_zhanwei"></view>
161 </view> 163 <view class="footer">
162 <view class="last_zhanwei"></view> 164 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
163 <view class="footer"> 165 <view class="footerRight">
164 <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view> 166 <view
165 <view class="footerRight"> 167 class="paybtn"
166 <view 168 @tap="orderBuild"
167 class="paybtn" 169 >立即支付</view>
168 @tap="orderBuild" 170 </view>
169 >立即支付</view> 171 </view>
170 </view> 172 </view>
171 </view> 173 </template>
172 </view> 174
173 </template> 175 <script>
174 176 import store from '@/store'
177 import MD5Util from '../../utils/md5'
175 <script> 178
176 import store from '@/store' 179 export default {
177 import MD5Util from '../../utils/md5' 180 data() {
178 181 return {
179 export default { 182 addAddress: '添加收货地址',
180 data() { 183 count: 1,
181 return { 184 pid: 0,
182 addAddress: '添加收货地址', 185 disabled: false,
183 count: 1, 186 freight: 0.0,
184 pid: 0, 187 showAddress: false,
185 disabled: false, 188 note: '',
186 freight: 0.0, 189 addressInfo: {
187 showAddress: false, 190 address: '',
188 note: '', 191 },
189 addressInfo: { 192 // isAnonymous:
190 address: '', 193 }
191 }, 194 },
192 // isAnonymous: 195 onLoad({ pid, addressId, isCart }) {
193 } 196 this.pid = pid
194 }, 197 // 若已经选择地址
195 onLoad({ pid, addressId, isCart }) { 198 if (addressId) {
196 this.pid = pid 199 store
197 // 若已经选择地址 200 .dispatch('address/details', {
198 if (addressId) { 201 add_id: addressId,
199 store 202 })
200 .dispatch('address/details', { 203 .then(({ code, data }) => {
201 add_id: addressId, 204 if (code === 1) {
202 }) 205 console.log('code', code, data)
203 .then(({ code, data }) => { 206 this.showAddress = true
204 if (code === 1) { 207 this.addressInfo = data
205 console.log('code', code, data) 208 }
206 this.showAddress = true 209 })
207 this.addressInfo = data 210 } else {
208 } 211 store.dispatch('address/default').then(({ code, data }) => {
209 }) 212 if (code === 1) {
210 } else { 213 console.log('code', code, data)
211 store.dispatch('address/default').then(({ code, data }) => { 214 this.showAddress = true
212 if (code === 1) { 215 this.addressInfo = data
213 console.log('code', code, data) 216 }
214 this.showAddress = true 217 })
215 this.addressInfo = data 218 }
216 } 219 store.dispatch('read/fetch', {
217 }) 220 pid,
218 } 221 })
219 store.dispatch('read/fetch', { 222 },
220 pid, 223 computed: {
221 }) 224 goodInfo() {
222 }, 225 console.log('state', this.$store.state)
223 computed: { 226 return this.$store.state.read.goodInfo
224 goodInfo() { 227 },
225 console.log('state', this.$store.state) 228 skuInfo() {
226 return this.$store.state.read.goodInfo 229 return this.$store.state.order.param.sk_id_arr
227 }, 230 },
228 skuInfo() { 231 attrList() {
229 return this.$store.state.order.param.sk_id_arr 232 return this.$store.state.order.param.attrList
230 }, 233 },
231 attrList() { 234 current() {
232 return this.$store.state.order.param.attrList 235 return this.$store.state.order.param.current
233 }, 236 },
234 current() { 237 },
235 return this.$store.state.order.param.current 238 methods: {
236 }, 239 counter(isadd) {
237 }, 240 if (isadd) {
238 methods: { 241 this.count++
239 counter(isadd) { 242 } else {
240 if (isadd) { 243 this.count <= 1 ? (this.disabled = true) : this.count--
241 this.count++ 244 }
242 } else { 245 },
243 this.count <= 1 ? (this.disabled = true) : this.count-- 246 // 跳转添加地址页面
244 } 247 toaddAddress() {
245 }, 248 uni.navigateTo({
246 // 跳转添加地址页面 249 url: `../address/addressList?edit=${1}`,
247 toaddAddress() { 250 success: res => {},
248 uni.navigateTo({ 251 fail: error => {
249 url: `../address/addressList?edit=${1}`, 252 console.log('跳转到地址列表页面失败====>', error)
250 success: res => {}, 253 },
251 fail: error => { 254 complete: () => {},
252 console.log('跳转到地址列表页面失败====>', error) 255 })
253 }, 256 },
254 complete: () => {}, 257 // 下单
255 }) 258 orderBuild() {
256 }, 259 uni.showLoading({
257 // 下单 260 title: '支付中',
258 orderBuild() { 261 })
259 uni.showLoading({ 262 console.log('this', this.$store.state)
260 title: '支付中', 263 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
261 }) 264 store.dispatch('order/buyNow', {
262 console.log('this', this.$store.state) 265 pid: skId.pid,
263 const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param 266 sk_id: skId.sk_id,
264 store.dispatch('order/buyNow', { 267 number: this.count,
265 pid: skId.pid, 268 mp_id: mpId,
266 sk_id: skId.sk_id, 269 address: JSON.stringify(this.addressInfo),
267 number: this.count, 270 totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
268 mp_id: mpId, 271 liuyan: this.note,
269 address: JSON.stringify(this.addressInfo), 272 dir: 1,
270 totalPrice: Number(this.skuInfo.real_price) * this.count * 100, 273 }).then((res) => {
271 liuyan: this.note, 274 this.pay(res.data)
275 })
272 dir: 1, 276 },
273 }).then((res) => { 277 // 支付
274 this.pay(res.data) 278 pay(res) {
275 }) 279 console.log('pay', res)
276 }, 280 const { data, exKeyName: keyName } = res
277 // 支付 281 const uid = uni.getStorageSync('uid')
282 const timeStamp = new Date().getTime().toString()
283 const nonceStr = 'asfafasfasfasfasf'
284 // 支付参数
278 pay(res) { 285 const fieldSet = {
279 console.log('pay', res) 286 openid: this.$store.state.user.userInfo.openid,
280 const { data, exKeyName: keyName } = res 287 uid: this.$store.state.user.userInfo.uid,
281 const uid = uni.getStorageSync('uid') 288 shopid: 0,
282 const timeStamp = new Date().getTime().toString() 289 payCate: 2020,
283 const nonceStr = 'asfafasfasfasfasf' 290 payMoney: Number(this.skuInfo.real_price) * this.count * 100,
284 // 支付参数 291 payWoodId: `fcdj-${uid}-${keyName}`,
285 const fieldSet = { 292 payWoodDesc: '在【非常戴镜】的微信付款凭证',
286 openid: this.$store.state.user.userInfo.openid, 293 nonceStr,
294 signType: 'MD5',
287 uid: this.$store.state.user.userInfo.uid, 295 app_uid: 2020,
288 shopid: 0, 296 timeStamp,
297 keyname: keyName,
289 payCate: 2020, 298 billInfo: JSON.stringify(data),
290 payMoney: Number(this.skuInfo.real_price) * this.count * 100, 299 }
291 payWoodId: `fcdj-${uid}-${keyName}`, 300 // 请求后台支付接口
292 payWoodDesc: '在【非常戴镜】的微信付款凭证', 301 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
293 nonceStr, 302 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
294 signType: 'MD5', 303 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
295 app_uid: 2020, 304 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'
296 timeStamp, 305
297 keyname: keyName, 306 // 微信支付接口
298 billInfo: JSON.stringify(data), 307 uni.requestPayment({
308 appId: data.appid,
309 timeStamp,
310 nonceStr,
311 total_fee: Number(this.skuInfo.real_price) * this.count * 100,
312 package: `prepay_id=${data.prepay_id}`,
313 signType: 'MD5',
314 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
315 success: (res) => {
316 // 支付成功
317 uni.showModal({
318 content: '支付成功',
319 showCancel: false,
320 })
321 // 跳转订单详情页->状态 待收货
322 uni.reLaunch({
323 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`,
324 })
325 },
326 fail: (res) => {
327 // 支付失败
328 uni.showModal({
329 content: '支付失败',
330 showCancel: false,
331 })
332 // 跳转订单详情页->状态 待付款
333 uni.reLaunch({
334 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`,
335 })
336 },
337 complete: () => {
338 uni.hideLoading()
339 },
340 })
341 } else {
342 uni.showModal({
343 content: '支付失败',
344 showCancel: false,
345 })
346 console.log('支付失败')
347 uni.hideLoading()
348 }
349 })
350 },
351 },
352 }
299 } 353 </script>
300 // 请求后台支付接口 354
301 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { 355 <style lang="scss">
302 if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { 356 .wrap {
303 const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` 357 height: 100vh;
304 const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' 358 background-color: #f2f2f2;
305 359 font-family: PingFangSC-Regular;
306 // 微信支付接口 360 letter-spacing: -0.23px;
307 uni.requestPayment({ 361 position: absolute;
308 appId: data.appid, 362 }
309 timeStamp, 363 .addAddress {
310 nonceStr, 364 background-color: #ffffff;
311 total_fee: Number(this.skuInfo.real_price) * this.count * 100, 365 box-sizing: border-box;
312 package: `prepay_id=${data.prepay_id}`, 366 height: 124rpx;
313 signType: 'MD5', 367 width: 100%;
314 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), 368 display: flex;
315 success: (res) => { 369 align-items: center;
316 // 支付成功 370 padding: 0 40rpx;
317 uni.showModal({ 371 .addIcon {
318 content: '支付成功', 372 background-color: #f2f2f2;
319 showCancel: false, 373 height: 56rpx;
320 }) 374 width: 60rpx;
321 // 跳转订单详情页->状态 待收货 375 border-radius: 4rpx;
322 uni.reLaunch({ 376 display: flex;
323 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=1&ispay=1`, 377 justify-content: center;
324 }) 378 align-items: center;
325 }, 379 margin-right: 40rpx;
326 fail: (res) => { 380 }
327 // 支付失败 381 image {
328 uni.showModal({ 382 height: 28rpx;
329 content: '支付失败', 383 width: 30rpx;
330 showCancel: false, 384 }
331 }) 385 .addressText {
332 // 跳转订单详情页->状态 待付款 386 font-size: 28rpx;
333 uni.reLaunch({ 387 color: #333333;
334 url: `../myOrderPaying/myOrderPaying?payId=${payId}&state=0&ispay=1`, 388 margin-right: 364rpx;
335 }) 389 }
336 }, 390 }
337 complete: () => { 391 .content {
338 uni.hideLoading() 392 background-color: #f2f2f2;
339 }, 393 width: 100%;
340 }) 394 display: flex;
341 } else { 395 flex-direction: column;
342 uni.showModal({ 396 justify-content: center;
343 content: '支付失败', 397 align-items: center;
344 showCancel: false, 398 padding: 40rpx;
345 }) 399 box-sizing: border-box;
346 console.log('支付失败') 400 .orderInfo {
347 uni.hideLoading() 401 width: 670rpx;
348 } 402 height: 488rpx;
349 }) 403 background-color: #ffffff;
350 }, 404 border-radius: 20rpx;
351 }, 405 box-sizing: border-box;
352 } 406 padding: 0 40rpx 40rpx 40rpx;
353 </script> 407 .title {
354 408 display: flex;
355 <style lang="scss"> 409 align-items: center;
356 .wrap { 410 font-size: 28rpx;
357 height: 100vh; 411 color: #333333;
358 background-color: #f2f2f2; 412 height: 60rpx;
359 font-family: PingFangSC-Regular; 413 line-height: 40rpx;
360 letter-spacing: -0.23px; 414 padding: 10rpx 10rpx 10rpx 0rpx;
361 position: absolute; 415 image {
362 } 416 margin-right: 20rpx;
363 .addAddress { 417 }
364 background-color: #ffffff; 418 }
365 box-sizing: border-box; 419 .infoBox {
366 height: 124rpx; 420 margin-top: 42rpx;
367 width: 100%; 421 .infoTop {
368 display: flex; 422 display: flex;
369 align-items: center; 423 flex-direction: row;
370 padding: 0 40rpx; 424 image {
371 .addIcon { 425 height: 188rpx;
372 background-color: #f2f2f2; 426 width: 188rpx;
373 height: 56rpx; 427 margin-right: 24rpx;
374 width: 60rpx; 428 }
375 border-radius: 4rpx; 429 .infoRight {
376 display: flex; 430 width: 374rpx;
377 justify-content: center; 431 display: flex;
378 align-items: center; 432 flex-direction: column;
379 margin-right: 40rpx; 433 align-items: flex-start;
380 } 434 justify-content: space-between;
381 image { 435 .goodName {
382 height: 28rpx; 436 font-size: 28rpx;
383 width: 30rpx; 437 color: #333333;
384 } 438 }
385 .addressText { 439 .remarks {
386 font-size: 28rpx; 440 font-size: 20rpx;
387 color: #333333; 441 color: #999999;
388 margin-right: 364rpx; 442 }
389 } 443 .priceBox {
390 } 444 display: flex;
391 .content { 445 justify-content: space-between;
392 background-color: #f2f2f2; 446 align-items: center;
393 width: 100%; 447 width: 100%;
394 display: flex; 448 .price {
395 flex-direction: column; 449 color: #ff6b4a;
396 justify-content: center; 450 font-size: 28rpx;
397 align-items: center; 451 }
398 padding: 40rpx; 452 .originCost {
399 box-sizing: border-box; 453 text-decoration: line-through;
400 .orderInfo { 454 color: #999999;
401 width: 670rpx; 455 font-size: 20rpx;
402 height: 488rpx; 456 }
403 background-color: #ffffff; 457 .counter {
404 border-radius: 20rpx; 458 display: flex;
405 box-sizing: border-box; 459 flex-direction: row;
406 padding: 0 40rpx 40rpx 40rpx; 460 justify-content: space-between;
407 .title { 461 font-size: 28rpx;
408 display: flex; 462 color: #333333;
409 align-items: center; 463 width: 122rpx;
410 font-size: 28rpx; 464 .btn {
411 color: #333333; 465 display: flex;
412 height: 60rpx; 466 justify-content: center;
413 line-height: 40rpx; 467 line-height: 32rpx;
414 padding: 10rpx 10rpx 10rpx 0rpx; 468 height: 32rpx;
415 image { 469 width: 32rpx;
416 margin-right: 20rpx; 470 background-color: #f2f2f2;
417 } 471 color: #cfcfcf;
418 } 472 }
419 .infoBox { 473 }
420 margin-top: 42rpx; 474 }
421 .infoTop { 475 }
422 display: flex; 476 }
423 flex-direction: row; 477 .infoBottom {
424 image { 478 display: flex;
425 height: 188rpx; 479 flex-direction: column;
426 width: 188rpx; 480 justify-content: flex-start;
427 margin-right: 24rpx; 481 font-size: 24rpx;
428 } 482 color: #333333;
429 .infoRight { 483 text {
430 width: 374rpx; 484 color: #999999;
431 display: flex; 485 margin-left: 20rpx;
432 flex-direction: column; 486 }
433 align-items: flex-start; 487
434 justify-content: space-between; 488 .norm {
435 .goodName { 489 margin-top: 28rpx;
436 font-size: 28rpx; 490 }
437 color: #333333; 491 .shippingMethod {
438 } 492 margin-top: 12rpx;
439 .remarks { 493 }
440 font-size: 20rpx; 494 .message {
441 color: #999999; 495 display: flex;
442 } 496 flex-direction: row;
443 .priceBox { 497 align-items: center;
444 display: flex; 498 margin-top: 18rpx;
445 justify-content: space-between; 499 input {
446 align-items: center; 500 margin-left: 20rpx;
447 width: 100%; 501 width: 75%;
448 .price { 502 }
449 color: #ff6b4a; 503 }
450 font-size: 28rpx; 504 }
451 } 505 }
452 .originCost { 506 }
453 text-decoration: line-through; 507 .payWay {
454 color: #999999; 508 height: 464rpx;
455 font-size: 20rpx; 509 width: 670rpx;
456 } 510 background-color: #ffffff;
457 .counter { 511 color: #333333;
458 display: flex; 512 font-size: 24rpx;
459 flex-direction: row; 513 border-radius: 20rpx;
460 justify-content: space-between; 514 box-sizing: border-box;
461 font-size: 28rpx; 515 padding: 0 52rpx 0rpx 40rpx;
462 color: #333333; 516 margin-top: 20rpx;
463 width: 122rpx; 517 display: flex;
464 .btn { 518 flex-direction: column;
465 display: flex; 519 justify-content: center;
466 justify-content: center; 520 align-items: flex-start;
467 line-height: 32rpx; 521 .item {
468 height: 32rpx; 522 display: flex;
469 width: 32rpx; 523 flex-direction: row;
470 background-color: #f2f2f2; 524 justify-content: space-between;
471 color: #cfcfcf; 525 align-items: center;
472 } 526 width: 100%;
473 } 527 height: 115rpx;
474 } 528 .itemRight {
475 } 529 display: flex;
476 } 530 flex-direction: row;
477 .infoBottom { 531 justify-content: space-between;
478 display: flex; 532 align-items: center;
479 flex-direction: column; 533 image {
480 justify-content: flex-start; 534 height: 24rpx;
481 font-size: 24rpx; 535 width: 12rpx;
482 color: #333333; 536 }
483 text { 537 .rightText {
484 color: #999999; 538 margin-right: 20rpx;
485 margin-left: 20rpx; 539 text-align: right;
486 } 540 .choosePayWay {
541 display: flex;
542 align-items: center;
487 543 text {
488 .norm { 544 color: #333333;
489 margin-top: 28rpx; 545 }
490 } 546 image {
491 .shippingMethod { 547 height: 36rpx;
492 margin-top: 12rpx; 548 width: 40rpx;
493 } 549 margin-right: 8px;
494 .message { 550 }
495 display: flex; 551 }
496 flex-direction: row; 552 .randomSubstraction {
497 align-items: center; 553 color: #ff6b4a;
498 margin-top: 18rpx; 554 }
499 input { 555 .preferentialWay {
500 margin-left: 20rpx; 556 color: #999999;
501 width: 75%; 557 }
502 } 558 }
503 } 559 .freight,
504 } 560 .total {
505 } 561 margin-right: 32rpx;
506 } 562 }
507 .payWay { 563 text {
508 height: 464rpx; 564 color: #ff6b4a;
509 width: 670rpx; 565 }
510 background-color: #ffffff; 566 }
511 color: #333333; 567 }
512 font-size: 24rpx; 568 }
513 border-radius: 20rpx; 569 // .checkBox {
514 box-sizing: border-box; 570 // height: 58rpx;
515 padding: 0 52rpx 0rpx 40rpx; 571 // line-height: 58rpx;
516 margin-top: 20rpx; 572 // width: 100%;
517 display: flex; 573 // margin-top: 36rpx;
518 flex-direction: column; 574 // margin-left: 40rpx;
519 justify-content: center; 575 // font-size: 12px;
520 align-items: flex-start; 576 // color: #999999;
521 .item { 577 // }
522 display: flex; 578 }
523 flex-direction: row; 579 .footer {
524 justify-content: space-between; 580 height: 112rpx;
525 align-items: center; 581 width: 100%;
526 width: 100%; 582 background-color: #fff;
527 height: 115rpx; 583 font-size: 16px;
528 .itemRight { 584 display: flex;
529 display: flex; 585 justify-content: space-between;
530 flex-direction: row; 586 align-items: center;
531 justify-content: space-between; 587 position: fixed;
532 align-items: center; 588 bottom: 0;
533 image { 589 .footerLeft {
534 height: 24rpx; 590 display: flex;
535 width: 12rpx; 591 justify-content: center;
536 } 592 align-items: center;
537 .rightText { 593 width: 50%;
538 margin-right: 20rpx; 594 color: #333333;
539 text-align: right; 595 text {
540 .choosePayWay { 596 color: #ff6b4a;
541 display: flex; 597 }
542 align-items: center; 598 }
543 text { 599 .footerRight {
544 color: #333333; 600 display: flex;
545 } 601 justify-content: flex-end;
546 image { 602 align-items: center;
547 height: 36rpx; 603 width: 50%;
548 width: 40rpx; 604 margin-right: 26rpx;
549 margin-right: 8px; 605 .paybtn {
550 } 606 display: flex;
551 } 607 justify-content: center;
552 .randomSubstraction { 608 align-items: center;
553 color: #ff6b4a; 609 background: #ff6b4a;
554 } 610 border-radius: 20px;
555 .preferentialWay { 611 border-radius: 20px;
556 color: #999999; 612 color: #ffffff;
557 } 613 width: 204rpx;
558 } 614 height: 80rpx;
559 .freight, 615 }
560 .total { 616 }
561 margin-right: 32rpx; 617 }
562 } 618 // 地址信息样式
563 text { 619 .order-user {
564 color: #ff6b4a; 620 width: 670rpx;
565 } 621 height: 228rpx;
566 } 622 background: #ffffff;
567 } 623 border-radius: 14rpx;
568 } 624 margin: 0 auto;
569 // .checkBox { 625 margin-top: 20rpx;
570 // height: 58rpx; 626 position: relative;
571 // line-height: 58rpx; 627 .order-user-head {
572 // width: 100%; 628 display: flex;
573 // margin-top: 36rpx; 629 height: 108rpx;
574 // margin-left: 40rpx; 630 width: 100%;
575 // font-size: 12px; 631 align-items: center;
576 // color: #999999; 632 margin-left: 126rpx;
577 // } 633 .name {
578 } 634 display: flex;
579 .footer { 635 justify-content: space-between;
580 height: 112rpx; 636 font-size: 14px;
581 width: 100%; 637 color: #333333;
582 background-color: #fff; 638 letter-spacing: -0.26px;
583 font-size: 16px; 639 margin-right: 20rpx;
584 display: flex; 640 .default {
585 justify-content: space-between; 641 height: 40rpx;
586 align-items: center; 642 width: 80rpx;
587 position: fixed; 643 background-color: #4a90e2;
588 bottom: 0; 644 border-radius: 13px;
589 .footerLeft { 645 border-radius: 13px;
590 display: flex; 646 text-align: center;
591 justify-content: center; 647 margin-right: 20rpx;
592 align-items: center; 648 text {
649 display: flex;
650 justify-content: center;
651 align-items: center;
593 width: 50%; 652 font-size: 12px;
594 color: #333333; 653 color: #ffffff;
595 text { 654 letter-spacing: -0.23px;
596 color: #ff6b4a; 655 }
597 } 656 }
598 } 657 }
599 .footerRight { 658 .mobile {
600 display: flex; 659 font-size: 14px;
601 justify-content: flex-end; 660 color: #999999;
602 align-items: center; 661 letter-spacing: -0.26px;
603 width: 50%; 662 }
604 margin-right: 26rpx; 663 }
605 .paybtn { 664 .order-user-body {
606 display: flex; 665 display: flex;
607 justify-content: center; 666 width: 100%;
608 align-items: center; 667 image {
609 background: #ff6b4a; 668 width: 24px;
610 border-radius: 20px; 669 height: 28px;
611 border-radius: 20px; 670 margin: 12rpx 32rpx 0 40rpx;
612 color: #ffffff; 671 }
613 width: 204rpx; 672 .address {
614 height: 80rpx; 673 font-weight: bold;
615 } 674 font-size: 14px;
616 } 675 color: #333333;
617 } 676 letter-spacing: -0.26px;
618 // 地址信息样式 677 }
619 .order-user { 678 }
620 width: 670rpx; 679 .arrow {
621 height: 228rpx; 680 width: 12px;
622 background: #ffffff; 681 height: 12px;
623 border-radius: 14rpx; 682 position: absolute;
624 margin: 0 auto; 683 right: 40rpx;
625 margin-top: 20rpx; 684 bottom: 104rpx;
626 position: relative; 685 }
627 .order-user-head { 686 }
687 .last_zhanwei{
688 background: #f2f2f2;
689 height: 60px;
690 }
628 display: flex; 691 </style>
629 height: 108rpx; 692
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @92d01cf
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}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{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"/>
313 <text>{{cartNumber}}</text>
314 </view>
312 <image v-bind:src="imgShop.img"/> 315 <view class="botton_image">购物车</view>
313 <text>{{cartNumber}}</text> 316 </view>
314 </view> 317 <view class="botton_2">
315 <view class="botton_image">购物车</view> 318 <view
316 </view> 319 class="botton_input"
317 <view class="botton_2"> 320 @tap="addCart()"
318 <view 321 >加入购物车</view>
319 class="botton_input" 322 <view
320 @tap="addCart()" 323 class="botton_now"
321 >加入购物车</view> 324 @tap="goPerchase()"
322 <view 325 >立即购买</view>
323 class="botton_now" 326 </view>
324 @tap="goPerchase()" 327 </view>
325 >立即购买</view> 328 </view>
326 </view> 329 </template>
327 </view> 330
328 </view> 331 <script>
329 </template> 332 import store from '@/store'
330 333 export default {
331 <script> 334 data () {
332 import store from '@/store' 335 return {
333 export default { 336 test: '',
334 data () { 337 goodType: 2,
335 return { 338 pid: 0,
336 test: '', 339 // 购物车数据
337 goodType: 2, 340 addCartList: {
338 pid: 0, 341 mp_id: 0,
339 // 购物车数据 342 sk_id: 0,
340 addCartList: { 343 num: 1,
341 mp_id: 0, 344 price: '',
342 sk_id: 0, 345 },
343 num: 1, 346 screenItems: [
344 price: '', 347 { current: 0, text: '商品介绍' },
345 }, 348 { current: 1, text: '规格参数' },
346 screenItems: [ 349 { current: 2, text: '售后保障' },
347 { current: 0, text: '商品介绍' }, 350 ],
348 { current: 1, text: '规格参数' }, 351 current: 0,
349 { current: 2, text: '售后保障' }, 352 starCount: 5,
350 ], 353 parameter: [
351 current: 0, 354 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
352 starCount: 5, 355 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
353 parameter: [ 356 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
354 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 357 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
355 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 358 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
356 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 359 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
357 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 360 ],
358 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 361 esvalue: '宝贝好评率',
359 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 362 introduction: {
360 ], 363 material: '钛合金',
361 esvalue: '宝贝好评率', 364 func: '抗疲劳/防辐射',
362 introduction: { 365 rate: '男/女',
363 material: '钛合金', 366 },
364 func: '抗疲劳/防辐射', 367 imgAll: '/static/img/detail/d8.png',
365 rate: '男/女', 368 photoes: [
366 }, 369 { value: '日常办公', img: '/static/img/detail/d9.png' },
367 imgAll: '/static/img/detail/d8.png', 370 { value: '上网', img: '/static/img/detail/d10.png' },
368 photoes: [ 371 { value: '追剧', img: '/static/img/detail/d11.png' },
369 { value: '日常办公', img: '/static/img/detail/d9.png' }, 372 { value: '玩游戏', img: '/static/img/detail/d12.png' },
370 { value: '上网', img: '/static/img/detail/d10.png' }, 373 ],
371 { value: '追剧', img: '/static/img/detail/d11.png' }, 374 imgDetail: '/static/img/detail/d13.png',
372 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 375 imgShop: {
373 ], 376 img: '/static/tab-cart.png',
374 imgDetail: '/static/img/detail/d13.png', 377 IsShown: false,
375 imgShop: { 378 },
376 img: '/static/tab-cart.png', 379 tag: {
377 IsShown: false, 380 prod_tag_freesend: [{
378 }, 381 label: '眼镜盒',
379 tag: { 382 value: '262',
380 prod_tag_freesend: [{ 383 }],
381 label: '眼镜盒', 384 },
382 value: '262', 385 }
383 }], 386 },
384 }, 387 onLoad: function ({ pid, sk_id: skId }) {
385 } 388 this.pid = pid
386 }, 389 // console.log('sk_id=====>',sk_id)
387 onLoad: function ({ pid, sk_id: skId }) { 390 store.dispatch('read/fetch', {
388 this.pid = pid 391 pid,
389 // console.log('sk_id=====>',sk_id) 392 sk_id: skId,
390 store.dispatch('read/fetch', { 393 }).then(() => {
391 pid, 394 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
392 sk_id: skId, 395 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
393 }).then(() => { 396 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
394 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 397 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
395 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 398 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
396 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 399 this.parameter[5].slength = `${this.goodInfo.weight}mm`
397 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 400 this.tag = this.goodInfo.tag
398 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 401 this.test = this.goodInfo.prodIntro1
399 this.parameter[5].slength = `${this.goodInfo.weight}mm` 402 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
400 this.tag = this.goodInfo.tag 403 // addCart
401 this.test = this.goodInfo.prodIntro1 404 this.addCartList.price = this.goodInfo.priceArea.Min_Price
402 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') 405 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
403 // addCart 406 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
404 this.addCartList.price = this.goodInfo.priceArea.Min_Price 407 })
408 store.dispatch('cart/getCartList')
405 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id 409 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
406 this.addCartList.mp_id = this.goodInfo.glassData.mp_id 410 },
407 }) 411 computed: {
408 store.dispatch('cart/getCartList') 412 updateGoodType () {
409 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 413 return this.goodType
410 }, 414 },
411 computed: { 415 goodInfo () {
412 updateGoodType () { 416 console.log(this.$store.state.read.goodInfo)
413 return this.goodType 417 return this.$store.state.read.goodInfo
414 }, 418 },
419 cartNumber() {
420 return this.$store.state.cart.cartList.length || 0
421 },
415 goodInfo () { 422 },
416 console.log(this.$store.state.read.goodInfo) 423 methods: {
417 return this.$store.state.read.goodInfo 424 // 前往购物车
418 }, 425 toCart() {
419 cartNumber() { 426 uni.switchTab({
420 return this.$store.state.cart.cartList.length || 0 427 url: '/pages/cart/cart',
421 }, 428 success: res => {},
422 }, 429 fail: (error) => { console.log('跳转购物车失败======>', error) },
423 methods: { 430 complete: () => { console.log('toCart') },
424 // 前往购物车 431 })
425 toCart() { 432 },
426 uni.switchTab({ 433 // 加入购物车
427 url: '/pages/cart/cart', 434 addCart () {
428 success: res => {}, 435 store.dispatch('cart/addCart', {
429 fail: (error) => { console.log('跳转购物车失败======>', error) }, 436 uid: this.$store.state.user.userInfo.uid,
430 complete: () => { console.log('toCart') }, 437 openid: this.$store.state.user.userInfo.openid,
431 }) 438 mp_id: this.addCartList.mp_id,
432 }, 439 sk_id: this.addCartList.sk_id,
433 // 加入购物车 440 num: this.addCartList.num,
434 addCart () { 441 pid: this.pid,
435 store.dispatch('cart/addCart', { 442 price: this.addCartList.price,
436 uid: this.$store.state.user.userInfo.uid, 443 })
437 openid: this.$store.state.user.userInfo.openid, 444 // 再次请求购物车接口，实现实时更新
438 mp_id: this.addCartList.mp_id, 445 store.dispatch('cart/getCartList', {
439 sk_id: this.addCartList.sk_id, 446 uid: this.$store.state.user.userInfo.uid,
440 num: this.addCartList.num, 447 })
441 pid: this.pid, 448 },
442 price: this.addCartList.price, 449 goPerchase () {
443 }) 450 // switch (this.updateGoodType) {
444 // 再次请求购物车接口，实现实时更新 451 // case '1':
445 store.dispatch('cart/getCartList', { 452 console.log('goPerchase')
446 uid: this.$store.state.user.userInfo.uid, 453 uni.navigateTo({
447 }) 454 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
448 }, 455 success: res => {},
449 goPerchase () { 456 fail: (error) => { console.log('跳转参数选择失败======>', error) },
450 // switch (this.updateGoodType) { 457 complete: () => { console.log('goPerchase') },
451 // case '1': 458 })
452 console.log('goPerchase') 459 // break
453 uni.navigateTo({ 460 // case '2':
454 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 461 // uni.navigateTo({
455 success: res => {}, 462 // url: '../detailStandard/detailStandard_k',
456 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 463 // success: res => {},
457 complete: () => { console.log('goPerchase') }, 464 // fail: () => {},
458 }) 465 // complete: () => {}
459 // break 466 // })
460 // case '2': 467 // break
461 // uni.navigateTo({ 468 // case '3':
462 // url: '../detailStandard/detailStandard_k', 469 // uni.navigateTo({
463 // success: res => {}, 470 // url: '../purchaseLenses/purchaseLenses',
464 // fail: () => {}, 471 // success: res => {},
465 // complete: () => {} 472 // fail: () => {},
466 // }) 473 // complete: () => {}
467 // break 474 // })
468 // case '3': 475 // break
469 // uni.navigateTo({ 476 // case '4':
470 // url: '../purchaseLenses/purchaseLenses', 477 // uni.navigateTo({
471 // success: res => {}, 478 // url: '../detailStandard/detailStandard_sun',
472 // fail: () => {}, 479 // success: res => {},
473 // complete: () => {} 480 // fail: () => {},
474 // }) 481 // complete: () => {}
475 // break 482 // })
476 // case '4': 483 // break
477 // uni.navigateTo({ 484 // default :
478 // url: '../detailStandard/detailStandard_sun', 485 // break
479 // success: res => {}, 486 // }
480 // fail: () => {}, 487 },
481 // complete: () => {} 488 // 加入购物车
482 // }) 489 // addCart () {
483 // break 490 // store.dispatch('cart/addCart', {
484 // default : 491 // uid: this.$store.state.user.userInfo.uid,
485 // break 492 // openid: this.$store.state.user.userInfo.openid,
486 // } 493 // pid: this.pid,
487 }, 494 // checkedSKU: {},
488 // 加入购物车 495 // })
489 // addCart () { 496 // store.dispatch('cart/getCartList', {
490 // store.dispatch('cart/addCart', { 497 // uid: this.$store.state.user.userInfo.uid, // 用户id
491 // uid: this.$store.state.user.userInfo.uid, 498 // })
492 // openid: this.$store.state.user.userInfo.openid, 499 // },
493 // pid: this.pid, 500 tabChange (e) {
494 // checkedSKU: {}, 501 if (this.current !== e) {
495 // }) 502 this.current = e
496 // store.dispatch('cart/getCartList', { 503 }
497 // uid: this.$store.state.user.userInfo.uid, // 用户id 504 },
498 // }) 505 },
499 // }, 506 }
500 tabChange (e) { 507 </script>
501 if (this.current !== e) { 508 <style lang='scss'>
502 this.current = e 509 .container {
503 } 510 background-color: #f8f8f8;
504 }, 511 }
505 }, 512 .D1,
506 } 513 .D2,
507 </script> 514 .D3,
508 <style lang='scss'> 515 .D4,
509 .container { 516 .D6 {
510 background-color: #f8f8f8; 517 background: #ffffff;
511 } 518 margin-bottom: 10px;
512 .D1, 519 padding: 8px 20px 8px 20px;
513 .D2, 520 box-sizing: border-box;
514 .D3, 521 .swiperImage {
515 .D4, 522 width: 684rpx;
516 .D6 { 523 height: 480rpx;
517 background: #ffffff; 524 image {
518 margin-bottom: 10px; 525 max-width: 100%;
519 padding: 8px 20px 8px 20px; 526 max-height: 100%;
520 box-sizing: border-box; 527 border-radius: 16rpx;
521 .swiperImage { 528 }
522 width: 684rpx; 529 }
523 height: 480rpx; 530 }
524 image { 531 .D5 {
525 max-width: 100%; 532 background: #ffffff;
526 max-height: 100%; 533 padding: 8px 20px 8px 20px;
527 border-radius: 16rpx; 534 box-sizing: border-box;
528 } 535 }
529 } 536 .swiperImage {
530 } 537 width: 100%;
531 .D5 { 538 height: 560rpx;
532 background: #ffffff; 539 .swiper-item {
533 padding: 8px 20px 8px 20px; 540 width: 100%;
534 box-sizing: border-box; 541 image {
535 } 542 width: 100%;
536 .swiperImage { 543 }
537 width: 100%; 544 }
538 height: 560rpx; 545 }
539 .swiper-item { 546 .D1 {
540 width: 100%; 547 .D1_price {
541 image { 548 color: #eb5d3b;
542 width: 100%; 549 font-size: 18px;
543 } 550 margin-top: 5px;
544 } 551 font-family: "PingFangSC-Semibold";
545 } 552 display: flex;
546 .D1 { 553 justify-content: space-between;
547 .D1_price { 554 .D1_number {
548 color: #eb5d3b; 555 color: #999999;
549 font-size: 18px; 556 font-size: 14px;
550 margin-top: 5px; 557 font-family: "PingFangSC-Regular";
551 font-family: "PingFangSC-Semibold"; 558 }
552 display: flex; 559 }
553 justify-content: space-between; 560 .D1_name {
554 .D1_number { 561 font-size: 16px;
555 color: #999999; 562 font-family: "PingFangSC-Semibold";
556 font-size: 14px; 563 margin-top: 5px;
557 font-family: "PingFangSC-Regular"; 564 .D1_name1 {
558 } 565 font-weight: bold;
559 } 566 font-size: 16px;
560 .D1_name { 567 color: #333333;
561 font-size: 16px; 568 }
562 font-family: "PingFangSC-Semibold"; 569 }
563 margin-top: 5px; 570 .D1_spans {
564 .D1_name1 { 571 font-size: 10px;
565 font-weight: bold; 572 color: #999999;
566 font-size: 16px; 573 margin-top: 5px;
567 color: #333333; 574 span {
568 } 575 height: 14px;
569 } 576 margin-right: 10px;
570 .D1_spans { 577 }
571 font-size: 10px; 578 }
572 color: #999999; 579 }
573 margin-top: 5px; 580 .D2 {
574 span { 581 font-size: 14px;
575 height: 14px; 582 font-family: "PingFangSC-Regular";
576 margin-right: 10px; 583 view {
577 } 584 height: 24px;
578 } 585 }
579 } 586 .D2_span1 {
580 .D2 { 587 color: #999999;
581 font-size: 14px; 588 }
582 font-family: "PingFangSC-Regular"; 589 .D2_span2 {
583 view { 590 color: #333333;
584 height: 24px; 591 }
585 } 592 }
586 .D2_span1 { 593 .D3 {
587 color: #999999; 594 .screenBar {
588 } 595 width: 670rpx;
589 .D2_span2 { 596 margin-top: 20rpx;
590 color: #333333; 597 margin-bottom: 24rpx;
591 } 598 display: flex;
592 } 599 flex-direction: row;
593 .D3 { 600 justify-content: space-between;
594 .screenBar { 601 align-items: center;
595 width: 670rpx; 602 font-size: 14px;
596 margin-top: 20rpx; 603 color: #333333;
597 margin-bottom: 24rpx; 604 transition: all 0.2s;
598 display: flex; 605 }
599 flex-direction: row; 606 .screen-item {
600 justify-content: space-between; 607 font-size: 32rpx;
601 align-items: center; 608 color: #333333;
602 font-size: 14px; 609 display: flex;
603 color: #333333; 610 transition: all 0.2s;
604 transition: all 0.2s; 611 .D3_list {
605 } 612 margin-bottom: 4px;
606 .screen-item { 613 }
607 font-size: 32rpx; 614 .D3_list view {
608 color: #333333; 615 display: flex;
609 display: flex; 616 align-content: center;
610 transition: all 0.2s; 617 font-size: 14px;
611 .D3_list { 618 color: #333333;
612 margin-bottom: 4px; 619 }
613 } 620 .D3_list image {
614 .D3_list view { 621 width: 50px;
615 display: flex; 622 height: 25px;
616 align-content: center; 623 margin-right: 6px;
617 font-size: 14px; 624 }
618 color: #333333; 625 .D3_list span {
619 } 626 margin-left: 6px;
620 .D3_list image { 627 margin-right: 5px;
621 width: 50px; 628 font-family: "PingFangSC-Regular";
622 height: 25px; 629 }
623 margin-right: 6px; 630 }
624 } 631 .active {
625 .D3_list span { 632 border-bottom: 4rpx solid #ff6b4a;
626 margin-left: 6px; 633 }
627 margin-right: 5px; 634 .customerService {
628 font-family: "PingFangSC-Regular"; 635 margin-bottom: 90rpx;
629 } 636 .serviceItem {
630 } 637 margin-bottom: 32rpx;
631 .active { 638 .title {
632 border-bottom: 4rpx solid #ff6b4a; 639 display: flex;
633 } 640 flex-direction: row;
634 .customerService { 641 align-items: center;
635 margin-bottom: 90rpx; 642 .titleText {
636 .serviceItem { 643 font-size: 14px;
637 margin-bottom: 32rpx; 644 color: #333333;
638 .title { 645 margin-bottom: 12rpx;
639 display: flex; 646 }
640 flex-direction: row; 647 }
641 align-items: center; 648 .itemContent {
642 .titleText { 649 font-size: 14px;
643 font-size: 14px; 650 color: #999999;
644 color: #333333; 651 margin-left: 18rpx;
645 margin-bottom: 12rpx; 652 }
646 } 653 }
647 } 654 .serviceItem2 {
648 .itemContent { 655 margin-left: 18rpx;
649 font-size: 14px; 656 margin-bottom: 32rpx;
650 color: #999999; 657 .titleText {
651 margin-left: 18rpx; 658 font-size: 14px;
652 } 659 color: #ff6b4a;
653 } 660 }
654 .serviceItem2 { 661 .itemContent {
655 margin-left: 18rpx; 662 font-size: 14px;
656 margin-bottom: 32rpx; 663 color: #999999;
657 .titleText { 664 .itemContent-child {
658 font-size: 14px; 665 margin-bottom: 40rpx;
659 color: #ff6b4a; 666 .contentTitle {
660 } 667 border-bottom: 1px solid #ff6b4a;
661 .itemContent { 668 }
662 font-size: 14px; 669 }
663 color: #999999; 670 }
664 .itemContent-child { 671 }
665 margin-bottom: 40rpx; 672 }
666 .contentTitle { 673 }
667 border-bottom: 1px solid #ff6b4a; 674 .D4 {
668 } 675 .D4_esvalue {
669 } 676 font-size: 14px;
670 } 677 color: #333333;
671 } 678 display: flex;
672 } 679 justify-content: space-between;
673 } 680 margin-bottom: 10px;
674 .D4 { 681 .D4_2 {
675 .D4_esvalue { 682 width: 90px;
676 font-size: 14px; 683 display: flex;
677 color: #333333; 684 align-items: center;
678 display: flex; 685 justify-content: space-between;
679 justify-content: space-between; 686 }
680 margin-bottom: 10px; 687 }
681 .D4_2 { 688 .D4_esvalue view {
682 width: 90px; 689 font-size: 14px;
683 display: flex; 690 color: #333333;
684 align-items: center; 691 font-weight: bold;
685 justify-content: space-between; 692 }
686 } 693 .D4_list{
687 } 694 display: grid;
688 .D4_esvalue view { 695 grid-row-gap: 10px;
689 font-size: 14px; 696 grid-column-gap: 4px;
690 color: #333333; 697 }
691 font-weight: bold; 698 .D4_list view {
692 } 699 display: flex;
693 .D4_list{ 700 justify-content: center;
694 display: grid; 701 align-items: center;
695 grid-row-gap: 10px; 702 font-size: 12px;
696 grid-column-gap: 4px; 703 width: 118px;
697 } 704 height: 24px;
698 .D4_list view { 705 border-radius: 2px;
699 display: flex; 706 background: #f2f2f2;
700 justify-content: center; 707 color: #666666;
701 align-items: center; 708 // letter-spacing: 1px;
702 font-size: 12px; 709 }
703 width: 118px; 710 }
704 height: 24px; 711 .D5 {
705 border-radius: 2px; 712 .D5_fixed1 {
706 background: #f2f2f2; 713 display: flex;
707 color: #666666; 714 justify-content: space-between;
708 // letter-spacing: 1px; 715 align-content: center;
709 } 716 margin-bottom: 12px;
710 } 717 view {
711 .D5 { 718 font-size: 14px;
712 .D5_fixed1 { 719 color: #333333;
713 display: flex; 720 font-weight: bold;
714 justify-content: space-between; 721 font-family: "PingFangSC-Medium";
715 align-content: center; 722 line-height: 24px;
716 margin-bottom: 12px; 723 }
717 view { 724 image {
718 font-size: 14px; 725 width: 240rpx;
719 color: #333333; 726 height: 3px;
720 font-weight: bold; 727 margin-top: 10px;
721 font-family: "PingFangSC-Medium"; 728 }
722 line-height: 24px; 729 }
723 } 730 .D5_all {
724 image { 731 width: 100%;
725 width: 240rpx; 732 margin-top: 30rpx;
726 height: 3px; 733 margin-right: 30rpx;
727 margin-top: 10px; 734 margin-bottom: 180rpx;
728 } 735 font-family: "PingFangSC-Regular";
729 } 736 // border: #999999 solid 1.5px;
730 .D5_all { 737 }
731 width: 100%; 738 }
732 margin-top: 30rpx; 739 .D6 {
733 margin-right: 30rpx; 740 width: 100%;
734 margin-bottom: 180rpx; 741 height: 430px;
735 font-family: "PingFangSC-Regular"; 742 background: #f9f6ed;
736 // border: #999999 solid 1.5px; 743 margin-bottom: 74px;
737 } 744 view {
738 } 745 text-align: center;
739 .D6 { 746 }
740 width: 100%; 747 .D6_v1 {
741 height: 430px; 748 font-weight: bold;
742 background: #f9f6ed; 749 }
743 margin-bottom: 74px; 750 .D6_v2 {
744 view { 751 font-size: 14px;
745 text-align: center; 752 margin-bottom: 30px;
746 } 753 }
747 .D6_v1 { 754 .D6_v5 {
748 font-weight: bold; 755 .D6_v5_s1 {
749 } 756 font-weight: bold;
750 .D6_v2 { 757 }
751 font-size: 14px; 758 .D6_v5_s2 {
752 margin-bottom: 30px; 759 font-size: 14px;
753 } 760 }
754 .D6_v5 { 761 }
755 .D6_v5_s1 { 762 }
756 font-weight: bold; 763 .botton {
757 } 764 position: fixed;
758 .D6_v5_s2 { 765 bottom: 0;
759 font-size: 14px; 766 height: 74px;
760 } 767 width: 100%;
761 } 768 background: #ffffff;
762 } 769 padding: 20px 20px 8px 20px;
763 .botton { 770 font-family: "PingFangSC-Regular";
764 position: fixed; 771 box-sizing: border-box;
765 bottom: 0; 772 display: flex;
766 height: 74px; 773 justify-content: space-between;
767 width: 100%; 774 align-content: center;
768 background: #ffffff; 775 .botton_1 {
769 padding: 20px 20px 8px 20px; 776 width: 20%;
770 font-family: "PingFangSC-Regular"; 777 height: 100%;
771 box-sizing: border-box; 778 text-align: center;
772 display: flex; 779 color: #989898;
780 .cart_icon {
781 position: relative;
782 image {
783
784 }
785 text {
786 position: absolute;
787 color: white;
788 font-size: 17px;
789 background-color: red;
790 min-height: 24px;
791 min-width:24px;
792 line-height: 24px;
793 right: -12%;
794 top: -12px;
795 text-align: center;
796 border-radius: 24px;
797 padding:2px;
798 }
799 }
773 justify-content: space-between; 800 }
774 align-content: center; 801 image {
775 .botton_1 { 802 width: 60%;
776 width: 20%; 803 height: 30px;
777 height: 100%; 804 }
778 text-align: center; 805 .botton_image {
779 color: #989898; 806 font-size: 12px;
780 .cart_icon { 807 text-align: center;
781 position: relative; 808 }
782 image { 809 .botton_2 {
783 810 width: 74%;
784 } 811 height: 86%;
785 text { 812 display: grid;
786 position: absolute; 813 grid-template-columns: 50% 50%;
787 color: white; 814 }
788 font-size: 17px; 815 .botton_input {
789 background-color: red; 816 display: inline-flex;
790 min-height: 24px; 817 align-items: center;
791 min-width:24px; 818 justify-content: space-around;
792 line-height: 24px; 819 background: #fff0ec;
793 right: -12%; 820 font-size: 16px;
794 top: -12px; 821 color: #ff6b4a;
795 text-align: center; 822 border-radius: 20px 0 0 20px;
796 border-radius: 24px; 823 }
797 padding:2px; 824 .botton_now {
798 } 825 display: inline-flex;
799 } 826 align-items: center;
800 } 827 justify-content: space-around;
801 image { 828 background: #ff6b4a;
802 width: 60%; 829 font-size: 16px;
803 height: 30px; 830 color: #ffffff;
804 } 831 border-radius: 0 20px 20px 0;
805 .botton_image { 832 }
806 font-size: 12px; 833 }
807 text-align: center; 834 </style>
808 } 835
src/pages/index/index.vue
Diff comments   View file @92d01cf
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 6 <icon
7 class="searchIcon" 7 class="searchIcon"
8 type="search" 8 type="search"
9 size="14" 9 size="14"
10 ></icon> 10 ></icon>
11 <input 11 <input
12 v-model="searchText" 12 v-model="searchText"
13 class="searchIpt" 13 class="searchIpt"
14 placeholder="老花镜" 14 placeholder="老花镜"
15 confirm-type="search" 15 confirm-type="search"
16 @blur="searchKey" 16 @blur="searchKey"
17 /> 17 />
18 </view> 18 </view>
19 19
20 <!-- 筛选栏--> 20 <!-- 筛选栏-->
21 <!-- <view class="screenBar"> 21 <!-- <view class="screenBar">
22 <view 22 <view
23 v-for="item in screenItems" 23 v-for="item in screenItems"
24 :key="item.current" 24 :key="item.current"
25 @click="onClickItem(item.current)" 25 @click="onClickItem(item.current)"
26 > 26 >
27 <view 27 <view
28 class="screenItem" 28 class="screenItem"
29 v-bind:class="{ active: current === item.current }" 29 v-bind:class="{ active: current === item.current }"
30 v-if="item.current === 2" 30 v-if="item.current === 2"
31 @click="dropDown" 31 @click="dropDown"
32 > 32 >
33 {{ item.text }} 33 {{ item.text }}
34 <icon 34 <icon
35 type="info" 35 type="info"
36 size="14" 36 size="14"
37 ></icon> 37 ></icon>
38 </view> 38 </view>
39 <view 39 <view
40 class="screenItem" 40 class="screenItem"
41 v-bind:class="{ active: current === item.current }" 41 v-bind:class="{ active: current === item.current }"
42 v-if="item.current === 4" 42 v-if="item.current === 4"
43 @click="showDrawer('showRight')" 43 @click="showDrawer('showRight')"
44 > 44 >
45 {{ item.text }} 45 {{ item.text }}
46 <icon 46 <icon
47 type="info" 47 type="info"
48 size="14" 48 size="14"
49 ></icon> 49 ></icon>
50 </view> 50 </view>
51 <view v-if="item.current !== 2&&item.current!==4"> 51 <view v-if="item.current !== 2&&item.current!==4">
52 <view 52 <view
53 class="screenItem" 53 class="screenItem"
54 v-bind:class="{ active: current === item.current }" 54 v-bind:class="{ active: current === item.current }"
55 >{{ item.text }}</view> 55 >{{ item.text }}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </view> --> 58 </view> -->
59 </view> 59 </view>
60 <Uni-drawer 60 <Uni-drawer
61 ref="showRight" 61 ref="showRight"
62 mask="true" 62 mask="true"
63 maskClick="true" 63 maskClick="true"
64 mode="right" 64 mode="right"
65 :width="320" 65 :width="320"
66 @change="change($event,'showRight')" 66 @change="change($event,'showRight')"
67 > 67 >
68 <view class="close"> 68 <view class="close">
69 <view @click="closeDrawer('showRight')"> 69 <view @click="closeDrawer('showRight')">
70 <text class="word-btn-white">关闭</text> 70 <text class="word-btn-white">关闭</text>
71 </view> 71 </view>
72 </view> 72 </view>
73 </Uni-drawer> 73 </Uni-drawer>
74 74
75 <!-- 筛选菜单--> 75 <!-- 筛选菜单-->
76 <view class="content-wrap"> 76 <view class="content-wrap">
77 <view> 77 <view>
78 <HMfilterDropdown 78 <HMfilterDropdown
79 :filterData="categoryList" 79 :filterData="categoryList"
80 :defaultSelected="filterDropdownValue" 80 :defaultSelected="filterDropdownValue"
81 :updateMenuName="true" 81 :updateMenuName="true"
82 @search="search" 82 @search="search"
83 @getList="getList" 83 @getList="getList"
84 data-format="Object" 84 data-format="Object"
85 ></HMfilterDropdown> 85 ></HMfilterDropdown>
86 <!-- 商品列表 --> 86 <!-- 商品列表 -->
87 <!-- <scroll-view
88 enable-flex
89 @scrolltolower="handleScrolltolower"
90 scroll-y
91 style="height: 1000px;margin-bottom: 20px;"
92 > -->
87 <!-- <scroll-view 93 <view class="goods-list">
88 enable-flex 94 <view class="product-list">
89 @scrolltolower="handleScrolltolower" 95 <view
90 scroll-y 96 class="product"
91 style="height: 1000px;margin-bottom: 20px;" 97 v-for="(goods) in goodsList"
92 > --> 98 :key="goods.id"
93 <view class="goods-list"> 99 >
94 <view class="product-list"> 100 <Card
101 :goods="goods"
102 :scrollTop="scrollTop"
103 :viewHeight="viewHeight"
104 ></Card>
95 <view 105 </view>
96 class="product" 106 </view>
97 v-for="(goods) in goodsList" 107 <view class="loading-text">{{loadingText}}</view>
98 :key="goods.id" 108 </view>
109 <!-- </scroll-view> -->
99 > 110 </view>
100 <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> 111 </view>
101 </view> 112 </view>
102 </view> 113 </template>
103 <view class="loading-text">{{loadingText}}</view> 114
104 </view> 115 <script>
105 <!-- </scroll-view> --> 116 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
106 </view> 117 import Card from "@/components/CommodityCard/CommodityCard.vue";
107 </view> 118 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
108 </view> 119 import store from "@/store";
109 </template> 120
110 121 export default {
111 <script> 122 components: {
112 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' 123 UniDrawer: UniDrawer,
113 import Card from '@/components/CommodityCard/CommodityCard.vue' 124 HMfilterDropdown: HMfilterDropdown,
114 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' 125 Card: Card
115 import store from '@/store' 126 },
116 127 data() {
117 export default { 128 return {
118 components: { 129 indexArr: "",
119 UniDrawer: UniDrawer, 130 valueArr: "",
120 HMfilterDropdown: HMfilterDropdown, 131 isLoading: true, //初始化加载状态
132 loadingText: "~~一开始应该是加载中。。。。等数据传完后，更新为到底了~~",
121 Card: Card, 133 filterDropdownValue: [],
122 }, 134 filterData: [],
123 data () { 135 searchText: "",
124 return { 136 scrollTop: 0,
137 viewHeight: uni.getSystemInfoSync().windowHeight
138 };
139 },
140 onPageScroll({ scrollTop }) {
141 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
142
143 this.scrollTop = scrollTop;
144 console.log("pagescroll====>", this.viewHeight);
125 indexArr: '', 145 },
126 valueArr: '', 146 computed: {
127 loadingText: '~~到底了~~', 147 goodsList() {
128 filterDropdownValue: [], 148 // 也可以从 getters 获取
129 filterData: [], 149 // console.log('index-list=====>',this.$store.state.index.list)
130 searchText: '', 150 return this.$store.state.index.list;
131 scrollTop: 0, 151 },
132 viewHeight: uni.getSystemInfoSync().windowHeight, 152 categoryList() {
133 } 153 return this.$store.state.index.categoryList;
134 }, 154 }
135 onPageScroll({scrollTop}) { 155 },
136 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 156 filters: {
137 157 outData(value) {
138 this.scrollTop = scrollTop; 158 return JSON.stringify(value);
139 console.log('pagescroll====>',this.viewHeight) 159 }
140 }, 160 },
141 computed: { 161 onLoad() {
142 goodsList () { 162 store.dispatch("index/category");
143 // 也可以从 getters 获取 163 // this.getList();
144 // console.log('index-list=====>',this.$store.state.index.list) 164 store.dispatch("index/list");
145 return this.$store.state.index.list 165 },
146 }, 166 methods: {
147 categoryList () { 167 showDrawer(e) {
148 return this.$store.state.index.categoryList 168 this.$refs[e].open();
149 }, 169 },
150 }, 170 getList() {
151 filters: { 171 store.dispatch("index/list");
152 outData (value) { 172 },
153 return JSON.stringify(value) 173 // search(params) {
154 }, 174 // this.$store.index.
155 }, 175 // },
156 onLoad () { 176 closeDrawer(e) {
157 store.dispatch('index/category') 177 this.$refs[e].close();
158 // this.getList(); 178 },
159 store.dispatch('index/list') 179 change(e, type) {
160 }, 180 this[type] = e;
161 methods: { 181 },
162 showDrawer (e) { 182 onClickItem(e) {
163 this.$refs[e].open() 183 if (this.current !== e) {
164 }, 184 this.current = e;
165 getList () { 185 }
166 store.dispatch('index/list') 186 },
167 }, 187 dropDown() {
168 // search(params) { 188 console.log("下拉");
169 // this.$store.index. 189 },
170 // }, 190 searchKey(e) {
171 closeDrawer (e) { 191 const { value: keyword } = e.detail;
172 this.$refs[e].close() 192 this.keyWords = keyword;
173 }, 193 store.dispatch("index/search", {
174 change (e, type) { 194 params: {},
175 this[type] = e 195 keyword
176 }, 196 });
177 onClickItem (e) { 197 },
178 if (this.current !== e) { 198 // 接收菜单结果
179 this.current = e 199 search(e) {
180 } 200 const { on, value, selectedData } = e;
181 }, 201 let params = {};
182 dropDown () { 202 const selectedPayload = {};
183 console.log('下拉') 203 for (const key in selectedData) {
184 }, 204 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
185 searchKey (e) { 205 selectedPayload[key] = selectedData[key].toString();
186 const { value: keyword } = e.detail 206 }
187 this.keyWords = keyword 207 }
188 store.dispatch('index/search', { 208 if (on[0] === 1) {
189 params: {}, 209 // 若点击全部
190 keyword, 210 this.searchText = "";
191 }) 211 store.dispatch("index/list");
192 }, 212 } else {
193 // 接收菜单结果 213 for (let i = 1; i <= on.length; i++) {
194 search (e) { 214 // on[0]是全部
195 const { on, value, selectedData } = e 215 if (on[i] === 1) {
216 // 若该选项被选中
217 if (this.categoryList[i].value === "filter") {
196 let params = {} 218 params = {
197 const selectedPayload = {} 219 ...selectedPayload,
198 for (const key in selectedData) { 220 ...params
199 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 221 };
200 selectedPayload[key] = selectedData[key].toString() 222 } else {
201 } 223 params[`${this.categoryList[i].value}`] = value[i][0];
202 } 224 }
203 if (on[0] === 1) { 225 }
204 // 若点击全部 226 }
205 this.searchText = '' 227 store.dispatch("index/search", {
206 store.dispatch('index/list') 228 params,
207 } else { 229 keyword: this.keyWords
208 for (let i = 1; i <= on.length; i++) { // on[0]是全部 230 });
209 if (on[i] === 1) { // 若该选项被选中 231 }
210 if (this.categoryList[i].value === 'filter') { 232 }
211 params = { 233 }
212 ...selectedPayload, 234 };
213 ...params,
214 } 235 </script>
215 } else { 236
216 params[`${this.categoryList[i].value}`] = value[i][0] 237 <style lang="scss">
217 } 238 .content {
218 } 239 display: flex;
219 } 240 flex-direction: column;
220 store.dispatch('index/search', { 241 align-items: center;
221 params, 242 justify-content: center;
222 keyword: this.keyWords, 243 background-color: #f7f6f6;
223 }) 244 }
224 } 245 .header {
225 } 246 display: flex;
226 } 247 flex-direction: column;
227 248 align-items: center;
228 } 249 justify-content: center;
229 </script> 250 background-color: #f7f6f6;
230 251 height: 178rpx;
231 <style lang="scss"> 252 width: 100%;
232 .content { 253 z-index: 999;
233 display: flex; 254 position: fixed;
234 flex-direction: column; 255 top: 0;
235 align-items: center; 256 left: 0;
236 justify-content: center; 257 }
237 background-color: #f7f6f6; 258 .searchBar {
238 } 259 width: 670rpx;
239 .header { 260 display: flex;
240 display: flex; 261 justify-content: center;
241 flex-direction: column; 262 align-items: center;
242 align-items: center; 263 box-sizing: border-box;
243 justify-content: center; 264 padding: 0rpx 16rpx;
244 background-color: #f7f6f6; 265 border: 1px solid #ff6b4a;
245 height: 178rpx; 266 border-radius: 8rpx;
246 width: 100%; 267 background-color: #ffffff;
247 z-index: 999; 268 }
248 position: fixed; 269
249 top: 0; 270 .searchIpt {
250 left: 0; 271 height: 68rpx;
251 } 272 width: 670rpx;
252 .searchBar { 273 padding: 16rpx;
253 width: 670rpx; 274 font-size: 28rpx;
254 display: flex; 275 box-sizing: border-box;
255 justify-content: center; 276 }
256 align-items: center; 277 .screenBar {
257 box-sizing: border-box; 278 width: 670rpx;
258 padding: 0rpx 16rpx; 279 height: 110rpx;
259 border: 1px solid #ff6b4a; 280 display: flex;
260 border-radius: 8rpx; 281 flex-direction: row;
261 background-color: #ffffff; 282 justify-content: space-between;
262 } 283 align-items: center;
263 284 color: #333333;
264 .searchIpt { 285 font-size: 32rpx;
265 height: 68rpx; 286 }
266 width: 670rpx; 287 .active {
267 padding: 16rpx; 288 color: #ff6b4a;
268 font-size: 28rpx; 289 }
269 box-sizing: border-box; 290 .screenItem {
270 } 291 display: flex;
271 .screenBar { 292 justify-content: center;
272 width: 670rpx; 293 align-items: center;
273 height: 110rpx; 294 }
274 display: flex; 295 .content-wrap {
275 flex-direction: row; 296 width: 100%;
276 justify-content: space-between; 297 background-color: #ffffff;
277 align-items: center; 298 }
278 color: #333333; 299
279 font-size: 32rpx; 300 .HMfilterDropdown {
280 } 301 top: 178rpx !important;
281 .active { 302 }
282 color: #ff6b4a; 303
283 } 304 .goods-list {
284 .screenItem { 305 padding-top: 286rpx;
285 display: flex; 306 .loading-text {
286 justify-content: center; 307 width: 100%;
287 align-items: center; 308 display: flex;
288 } 309 justify-content: center;
289 .content-wrap { 310 align-items: center;
290 width: 100%; 311 height: 30px;
291 background-color: #ffffff; 312 color: #979797;
292 } 313 font-size: 12px;
293 314 }
294 .HMfilterDropdown { 315 .product-list {
295 top: 178rpx !important; 316 width: 92%;
296 } 317 padding: 0 4% 3vw 4%;
297 318 display: flex;
298 .goods-list { 319 justify-content: space-between;
299 padding-top: 286rpx; 320 flex-wrap: wrap;
300 .loading-text { 321 .product {
301 width: 100%; 322 width: 48%;
302 display: flex; 323 margin: 0 0 20rpx 0;
303 justify-content: center; 324 background: #ffffff;
304 align-items: center; 325 border: 1px solid #f2f2f2;
305 height: 30px; 326 }
306 color: #979797; 327 }
307 font-size: 12px; 328 }
308 } 329 </style>
src/pages/myOrder/components/OrderCard.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="card" v-if="current == status" @click="toOrderInfo(status,order.pay_id)"> 3 <view
4 <view class="cardHeader"> 4 class="card"
5 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 5 v-if="current == status"
6 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 6 @click="toOrderInfo(status,order.pay_id)"
7 <text class="orderType" v-if="status=='0'">待付款</text> 7 >
8 <text class="orderType" v-if="status=='1'">待收货</text> 8 <view class="cardHeader">
9 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 9 <text
10 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 10 class="orderId"
11 </view> 11 v-if="status == '0'||status == '1'"
12 <view class="orderCardInfo" v-for="(orderInfo, index) in orderInfoList.list" :key="index"> 12 >订单号：{{order.pay_id}}</text>
13 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 13 <text
14 <view class="infoText"> 14 class="orderId"
15 <view class="orderName">{{orderInfo[0].p_name}}</view> 15 v-if="status == '2'||status == '3'"
16 <view class="orderDescrib">{{orderInfo.p_name}}</view> 16 >下单时间：{{order.pay_time}}</text>
17 <view class="infoText-bottom"> 17 <text
18 <view class="markPrice">{{orderInfo.nowPrice}}</view> 18 class="orderType"
19 <view class="buy-num">X {{orderInfo.num}}</view> 19 v-if="status=='0'"
20 </view> 20 >待付款</text>
21 </view> 21 <text
22 </view> 22 class="orderType"
23 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 23 v-if="status=='1'"
24 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> 24 >待收货</text>
25 <view class="btns" v-if="status == '0'"> 25 <text
26 <view class="btn-type1" >取消订单</view> 26 class="orderType"
27 <view class="btn-type2">去支付</view> 27 v-if="status == '2'||status == '3'"
28 </view> 28 >已完成</text>
29 <view class="btns" v-if="status == '1'"> 29 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
30 <view class="btn-type2">确认收货</view> 30 </view>
31 </view> 31 <view
32 <view class="btns" v-if="status == '2'"> 32 class="orderCardInfo"
33 <view class="btn-type2">再次购买</view> 33 v-for="(orderInfo, index) in order.order_info.list"
34 </view> 34 :key="index"
35 <!-- <view class="btns" v-if="status == '3'"> 35 >
36 <image
37 :src="orderInfo.imgUrl"
38 mode="aspectFill"
39 ></image>
40 <view class="infoText">
41 <view class="orderName">{{orderInfo.p_name}}</view>
42 <view class="orderDescrib">{{orderInfo.p_name}}</view>
43 <view class="infoText-bottom">
44 <view class="markPrice">{{orderInfo.nowPrice}}</view>
45 <view class="buy-num">X {{orderInfo.num}}</view>
46 </view>
47 </view>
48 </view>
49 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
50 <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
51 <view
52 class="btns"
53 v-if="status == '0'"
54 >
55 <view class="btn-type1">取消订单</view>
56 <view class="btn-type2">去支付</view>
57 </view>
58 <view
59 class="btns"
60 v-if="status == '1'"
61 >
62 <view class="btn-type2">确认收货</view>
63 </view>
64 <view
65 class="btns"
66 v-if="status == '2'"
67 >
68 <view class="btn-type2">再次购买</view>
69 </view>
70 <!-- <view class="btns" v-if="status == '3'">
36 <view class="btn-type2">再次购买</view> 71 <view class="btn-type2">再次购买</view>
37 </view> --> 72 </view> -->
38 </view> 73 </view>
39 <view class="card" v-if="current == '10'" @click="toOrderInfo(status,order.pay_id)"> 74 <view
40 <view class="cardHeader"> 75 class="card"
41 <text class="orderId" v-if="status == '0'||status == '1'">订单号：{{order.mch_id}}</text> 76 v-if="current == '10'"
42 <text class="orderId" v-if="status == '2'||status == '3'">下单时间：{{order.pay_time}}</text> 77 @click="toOrderInfo(status,order.pay_id)"
43 <text class="orderType" v-if="status=='0'">待付款</text> 78 >
44 <text class="orderType" v-if="status=='1'">待收货</text> 79 <view class="cardHeader">
45 <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> 80 <text
46 <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> 81 class="orderId"
47 </view> 82 v-if="status == '0'||status == '1'"
48 <view class="orderCardInfo" v-if v-for="(orderInfo) in orderInfoList.list" :key="orderInfo"> 83 >订单号：{{order.pay_id}}</text>
49 <image :src="orderInfo.imgUrl" mode="aspectFill"></image> 84 <text
50 <view class="infoText"> 85 class="orderId"
51 <view class="orderName">{{orderInfo.p_name}}</view> 86 v-if="status == '2'||status == '3'"
52 <view class="orderDescrib">{{orderInfo.p_name}}</view> 87 >下单时间：{{order.pay_time}}</text>
53 <view class="infoText-bottom"> 88 <text
54 <view class="markPrice">{{orderInfo.nowPrice}}</view> 89 class="orderType"
55 <view class="buy-num">X {{orderInfo.num}}</view> 90 v-if="status=='0'"
56 </view> 91 >待付款</text>
57 </view> 92 <text
58 </view> 93 class="orderType"
59 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view> 94 v-if="status=='1'"
60 <view class="btns" v-if="status == '0'"> 95 >待收货</text>
61 <view class="btn-type1" >取消订单</view> 96 <text
62 <view class="btn-type2">去支付</view> 97 class="orderType"
63 </view> 98 v-if="status == '2'||status == '3'"
64 <view class="btns" v-if="status == '1'"> 99 >已完成</text>
65 <view class="btn-type2">确认收货</view> 100 <!-- <text class="orderType" v-if="status == '3'">已评价</text> -->
66 </view> 101 </view>
67 <view class="btns" v-if="status == '2'"> 102 <view
68 <view class="btn-type2">再次购买</view> 103 class="orderCardInfo"
69 </view> 104 v-if
70 <!-- <view class="btns" v-if="status == '3'"> 105 v-for="(orderInfo) in order.order_info.list"
106 :key="orderInfo"
107 >
108 <image
109 :src="orderInfo.imgUrl"
110 mode="aspectFit"
111 ></image>
112 <view class="infoText">
113 <view class="orderName">{{orderInfo.p_name}}</view>
114 <view class="orderDescrib">{{orderInfo.p_name}}</view>
115 <view class="infoText-bottom">
116 <view class="markPrice">{{orderInfo.nowPrice}}</view>
117 <view class="buy-num">X {{orderInfo.num}}</view>
118 </view>
119 </view>
120 </view>
121 <view class="payPrice">实付：<text class="priceNum">{{order.total_fee}}</text> </view>
122 <view
123 class="btns"
124 v-if="status == '0'"
125 >
126 <view class="btn-type1">取消订单</view>
127 <view class="btn-type2">去支付</view>
128 </view>
129 <view
130 class="btns"
131 v-if="status == '1'"
132 >
133 <view class="btn-type2">确认收货</view>
134 </view>
135 <view
136 class="btns"
137 v-if="status == '2'"
138 >
139 <view class="btn-type2">再次购买</view>
140 </view>
141 <!-- <view class="btns" v-if="status == '3'">
71 <view class="btn-type2">再次购买</view> 142 <view class="btn-type2">再次购买</view>
72 </view> --> 143 </view> -->
73 </view> 144 </view>
74 </view> 145 </view>
75 </template> 146 </template>
76 147
77 <script> 148 <script>
78 export default { 149 export default {
79 props: { 150 props: {
80 /** 151 /**
81 * 订单数据 152 * 订单数据
82 */ 153 */
83 order: { 154 order: {
84 // orderId: Number, 155 // orderId: Number,
85 // img: String, 156 // img: String,
86 // name: String, 157 // name: String,
87 // originCost:String, 158 // originCost:String,
88 // price: String, 159 // price: String,
89 // orderType:Number, 160 // orderType:Number,
90 // buyNum:Number, 161 // buyNum:Number,
91 finished_time: null, 162 finished_time: null,
92 is_refound: String, 163 is_refound: String,
93 mch_id: String, 164 mch_id: String,
94 money_of_dcw: String, 165 money_of_dcw: String,
95 money_of_partner: String, 166 money_of_partner: String,
96 money_of_shop: String, 167 money_of_shop: String,
97 orderJudge: Boolean, 168 orderJudge: Boolean,
98 order_info: { 169 order_info: {
99 address:{ 170 address: {
100 cityName: String, 171 cityName: String,
101 countyName: String, 172 countyName: String,
102 detailInfo: String, 173 detailInfo: String,
103 errMsg: String, 174 errMsg: String,
104 nationalCode: String, 175 nationalCode: String,
105 postalCode: String, 176 postalCode: String,
106 provinceName: String, 177 provinceName: String,
107 telNumber: String, 178 telNumber: String,
108 userName: String, 179 userName: String
109 }, 180 },
110 cartinfo: ["127"], 181 cartinfo: ["127"],
111 keyname: "330_1588911391", 182 keyname: "330_1588911391",
112 lefttime: Number, 183 lefttime: Number,
113 list:[ 184 list: [
114 { 185 {
115 cart_id: "127", 186 cart_id: "127",
116 imgUrl: String, 187 imgUrl: String,
117 img_index_url: null, 188 img_index_url: null,
118 memo: String, 189 memo: String,
119 mp_id: String, 190 mp_id: String,
120 nowPrice: String, 191 nowPrice: String,
121 num: String, 192 num: String,
122 oldPrice: Number, 193 oldPrice: Number,
123 p_discount: String, 194 p_discount: String,
124 p_name: String, 195 p_name: String,
125 p_root_index: String, 196 p_root_index: String,
126 p_sale_price: String, 197 p_sale_price: String,
127 peopleName: String, 198 peopleName: String,
128 pics: ["79_0_D122D2.jpg","79_1_E0A1ED.jpg","79_2_B00B3D.jpg","79_3_B2CF21.jpg","79_4_33AD1B.jpg"], 199 pics: [
129 pid: String, 200 "79_0_D122D2.jpg",
130 sk_id: String, 201 "79_1_E0A1ED.jpg",
131 } 202 "79_2_B00B3D.jpg",
132 ], 203 "79_3_B2CF21.jpg",
133 orderDesc: String, 204 "79_4_33AD1B.jpg"
134 total_fee: Number, 205 ],
135 }, 206 pid: String,
136 partner_uid: String, 207 sk_id: String
137 pay_cate: String, 208 }
138 pay_id: String, 209 ],
139 pay_time: String, 210 orderDesc: String,
140 pay_wood_desc: String, 211 total_fee: Number
141 pay_wood_id: String, 212 },
142 prepay_id: String, 213 partner_uid: String,
143 re_check_staus: String, 214 pay_cate: String,
144 shopid: String, 215 pay_id: String,
145 split_userid: String, 216 pay_time: String,
146 status: String, 217 pay_wood_desc: String,
147 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价 218 pay_wood_id: String,
148 total_fee: String, 219 prepay_id: String,
149 uid: String, 220 re_check_staus: String,
150 }, 221 shopid: String,
151 /** 222 split_userid: String,
152 * 当前选择 223 status: String,
153 */ 224 // status0待付款 1已付款 待收货 2 已收货待评价 3 已评价
154 current:Number 225 total_fee: String,
155 226 uid: String
156 }, 227 },
157 created() { 228 /**
158 console.log(this.order); 229 * 当前选择
159 // console.log(this.order.status ); 230 */
160 // console.log(this.current); 231 current: Number
161 }, 232 },
162 computed:{ 233 created() {
163 status(){ 234 console.log("this.order", this.order);
164 return this.order.status 235 // console.log(this.order.status );
165 }, 236 // console.log(this.current);
166 orderInfoList(){ 237 },
167 console.log('this.order.order_info[0]', this.order) 238 computed: {
168 return this.order.order_info[0] 239 status() {
169 } 240 return this.order.status;
170 }, 241 },
171 data() { 242 orderInfoList() {
172 return { 243 console.log("this.order.order_info[0]", this.order);
173 }; 244 return this.order.order_info;
174 }, 245 }
175 methods:{ 246 },
176 toRefundment(){ 247 data() {
177 uni.navigateTo({ 248 return {};
178 url: '../refundment/refundment', 249 },
179 success: res => {}, 250 methods: {
180 fail: () => {}, 251 toRefundment() {
181 complete: () => {} 252 uni.navigateTo({
182 }); 253 url: "../refundment/refundment",
183 }, 254 success: res => {},
184 toOrderInfo(status,payId){ 255 fail: () => {},
185 console.log(status,payId) 256 complete: () => {}
186 switch(status){ 257 });
187 // 0待付款 1待收货 2已收货 3 已评价 258 },
188 case '0': 259 toOrderInfo(status, payId) {
189 uni.navigateTo({ 260 console.log(status, payId);
190 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 261 switch (status) {
191 fail(errMsg) { 262 // 0待付款 1待收货 2已收货 3 已评价
192 console.log(errMsg) 263 case "0":
193 } 264 uni.navigateTo({
194 }) 265 url:
195 break; 266 `../myOrderPaying/myOrderPaying?status=` +
196 case '1': 267 status +
197 uni.navigateTo({ 268 `&payId=` +
198 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 269 payId,
199 fail(errMsg) { 270 fail(errMsg) {
200 console.log(errMsg) 271 console.log(errMsg);
201 } 272 }
202 }) 273 });
203 274 break;
204 break; 275 case "1":
205 case '2 || 3': 276 uni.navigateTo({
206 uni.navigateTo({ 277 url:
207 url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, 278 `../myOrderPaying/myOrderPaying?status=` +
208 fail(errMsg) { 279 status +
209 console.log(errMsg) 280 `&payId=` +
210 } 281 payId,
211 }) 282 fail(errMsg) {
212 break; 283 console.log(errMsg);
213 default: 284 }
214 break; 285 });
215 286
216 } 287 break;
217 } 288 case "2 || 3":
218 } 289 uni.navigateTo({
290 url:
291 `../myOrderPaying/myOrderPaying?status=` +
292 status +
293 `&payId=` +
294 payId,
295 fail(errMsg) {
296 console.log(errMsg);
297 }
298 });
299 break;
300 default:
301 break;
302 }
303 }
304 }
305 };
219 } 306 </script>
220 </script> 307
221 308 <style lang="scss">
222 <style lang="scss"> 309 .card {
223 .card{ 310 width: 670rpx;
224 width: 670rpx; 311 height: 478rpx;
225 height: 478rpx; 312 background: #ffffff;
226 background: #FFFFFF; 313 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); 314 border-radius: 8px;
228 border-radius: 8px; 315 border-radius: 8px;
229 border-radius: 8px; 316 margin-top: 20rpx;
230 margin-top: 20rpx; 317 padding: 40rpx;
231 padding: 40rpx; 318 box-sizing: border-box;
232 box-sizing: border-box; 319 .cardHeader {
233 .cardHeader{ 320 width: 100%;
234 width: 100%; 321 height: 40rpx;
235 height: 40rpx; 322 display: flex;
236 display: flex; 323 justify-content: space-between;
237 justify-content: space-between; 324 align-items: center;
238 align-items: center; 325 .orderId {
239 .orderId{ 326 font-size: 12px;
240 font-size: 12px; 327 color: #999999;
241 color: #999999; 328 }
242 } 329 .orderType {
243 .orderType{ 330 font-size: 14px;
244 font-size: 14px; 331 color: #ff6b4a;
245 color: #FF6B4A; 332 }
246 } 333 }
247 } 334 .orderCardInfo {
248 .orderCardInfo{ 335 width: 100%;
249 width: 100%; 336 height: 188rpx;
250 height: 188rpx; 337 display: flex;
251 display: flex; 338 flex-direction: row;
252 flex-direction: row; 339 justify-content: space-between;
253 justify-content: space-between; 340 align-items: center;
254 align-items: center; 341 margin-top: 40rpx;
255 margin-top: 40rpx; 342 image {
256 image{ 343 height: 188rpx;
257 height: 188rpx; 344 width: 188rpx;
258 width: 188rpx; 345 margin-right: 24rpx;
259 margin-right: 24rpx; 346 }
260 } 347 .infoText {
261 .infoText{ 348 display: flex;
262 display: flex; 349 flex-direction: column;
263 flex-direction: column; 350 justify-content: space-between;
264 justify-content: space-between; 351 align-items: flex-start;
265 align-items: flex-start; 352 height: 188rpx;
266 height: 188rpx; 353 width: 368rpx;
267 width: 368rpx; 354 }
268 } 355 .orderName {
269 .orderName{ 356 font-size: 14px;
270 font-size: 14px; 357 color: #333333;
271 color: #333333; 358 display: -webkit-box;
272 display: -webkit-box; 359 overflow: hidden;
273 overflow: hidden; 360 -webkit-box-orient: vertical;
274 -webkit-box-orient: vertical; 361 -webkit-line-clamp: 2;
275 -webkit-line-clamp: 2; 362 }
276 } 363 .orderDescrib {
277 .orderDescrib{ 364 font-size: 12px;
278 font-size: 12px; 365 color: #999999;
279 color: #999999; 366 display: -webkit-box;
280 display: -webkit-box; 367 overflow: hidden;
281 overflow: hidden; 368 -webkit-box-orient: vertical;
282 -webkit-box-orient: vertical; 369 -webkit-line-clamp: 2;
283 -webkit-line-clamp: 2; 370 }
284 } 371 .infoText-bottom {
285 .infoText-bottom{ 372 display: flex;
286 display: flex; 373 flex-direction: row;
287 flex-direction: row; 374 justify-content: flex-start;
288 justify-content: flex-start; 375 align-items: center;
289 align-items: center; 376 width: 100%;
290 width: 100%; 377 .markPrice {
291 .markPrice{ 378 font-size: 14px;
292 font-size: 14px; 379 color: #ff6b4a;
293 color: #FF6B4A; 380 margin-right: 20rpx;
294 margin-right: 20rpx; 381 }
295 } 382 .buy-num {
296 .buy-num{ 383 font-size: 12px;
297 font-size: 12px; 384 color: #999999;
298 color: #999999; 385 }
299 } 386 }
300 } 387 }
301 } 388 .payPrice {
302 .payPrice{ 389 text-align: right;
303 text-align: right; 390 margin: 20rpx 0;
304 margin: 20rpx 0; 391 font-size: 14px;
305 font-size: 14px; 392 color: #333333;
306 color: #333333; 393 .priceNum {
307 .priceNum{ 394 font-size: 14px;
308 font-size: 14px; 395 color: #ff6b4a;
309 color: #FF6B4A; 396 }
310 } 397 }
311 } 398 .btns {
312 .btns{ 399 display: flex;
313 display: flex; 400 justify-content: flex-end;
314 justify-content: flex-end; 401 align-items: center;
315 align-items: center; 402 .btn-type1 {
316 .btn-type1{ 403 height: 48rpx;
317 height: 48rpx; 404 width: 156rpx;
318 width: 156rpx; 405 border: 1px solid #ff6b4a;
319 border: 1px solid #FF6B4A; 406 border-radius: 12px;
320 border-radius: 12px; 407 border-radius: 12px;
321 border-radius: 12px; 408 text-align: center;
322 text-align: center; 409 line-height: 48rpx;
323 line-height: 48rpx; 410 font-size: 12px;
324 font-size: 12px; 411 color: #ff6b4a;
325 color: #FF6B4A; 412 }
326 } 413 .btn-type2 {
327 .btn-type2{ 414 height: 48rpx;
328 height: 48rpx; 415 width: 140rpx;
329 width: 140rpx; 416 background: #ff6b4a;
330 background: #FF6B4A; 417 border-radius: 12px;
331 border-radius: 12px; 418 border-radius: 12px;
332 border-radius: 12px; 419 text-align: center;
333 text-align: center; 420 line-height: 48rpx;
334 line-height: 48rpx; 421 font-size: 12px;
335 font-size: 12px; 422 color: #ffffff;
336 color: #FFFFFF; 423 margin-left: 20rpx;
337 margin-left: 20rpx; 424 }
338 } 425 }
339 } 426 }
340 } 427 </style>
341 </style> 428
src/pages/myOrder/myOrder.vue
Diff comments   View file @92d01cf
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.pay_id"
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 console.log("onClickItem", e);
77 if (this.current !== e) { 78 if (this.current !== e) {
78 this.current = e 79 this.current = e;
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>
src/pages/myOrderPaying/myOrderPaying.vue
Diff comments   View file @92d01cf
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.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.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 (option) { 144 console.log(option);
144 console.log(option) 145 this.payId = option.payId;
145 this.payId = option.payId 146 this.status = option.status;
146 this.status = option.status 147 this.isPay = option.isPay;
147 this.isPay = option.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;
152 store.dispatch("orderRead/getOrderInfo", {
151 this.openid = openid 153 pay_id: this.payId,
152 store.dispatch('orderRead/getOrderInfo', { 154 uid: "1",
153 pay_id: this.payId, 155 openid: openid
154 uid: '1', 156 });
155 openid: openid,
156 }) 157 // this.orderInfo = this.$store.state.orderRead.orderInfo
157 // this.orderInfo = this.$store.state.orderRead.orderInfo 158 },
159 // 若从支付页面跳转过来，返回直接返回到首页
160 onBackPress(option) {
161 if (option.from === "backbutton" && this.isPay) {
162 uni.switchTab({
163 url: "/pages/index/index"
164 });
165 return true; // 阻止默认返回行为
166 }
167 },
158 }, 168 computed: {
159 // 若从支付页面跳转过来，返回直接返回到首页 169 // 获取订单详细信息
160 onBackPress(option) { 170 orderInfo() {
161 if (option.from === 'backbutton' && this.isPay) { 171 console.log("orderInfo", this.$store.state.orderRead.orderInfo);
162 uni.switchTab({ 172 return this.$store.state.orderRead.orderInfo || {};
163 url: '/pages/index/index', 173 },
164 }) 174 orderInfoList() {
165 return true // 阻止默认返回行为 175 const orderInfoList = this.orderInfo.order_info.list;
166 } 176 return orderInfoList;
167 }, 177 },
168 computed: { 178 // 获取订单地址信息
169 // 获取订单详细信息 179 orderAddressInfo() {
170 orderInfo () { 180 return this.orderInfo.order_info.address;
171 console.log('orderInfo', this.$store.state.orderRead.orderInfo) 181 },
172 return this.$store.state.orderRead.orderInfo || {} 182 // 订单付款时间
173 }, 183 getTime() {
174 orderInfoList () { 184 return this.orderInfo.order_info.lefttime;
175 const orderInfoList = this.orderInfo.order_info[0].list 185 },
176 return orderInfoList 186 // 计算总优惠额
177 }, 187 totalDiscount() {
178 // 获取订单地址信息 188 const discountInfoList = this.orderInfo.discount_info;
179 orderAddressInfo () { 189 let totalDiscount = 0;
180 return this.orderInfo.order_info[0].address 190 if (discountInfoList) {
181 }, 191 discountInfoList.map((discountItem, index) => {
182 // 订单付款时间 192 totalDiscount += Number(discountItem.value);
183 getTime () { 193 });
184 return this.orderInfo.order_info[0].lefttime 194 }
185 }, 195 // console.log(totalDiscount)
186 // 计算总优惠额 196 return totalDiscount;
187 totalDiscount () { 197 }
188 const discountInfoList = this.orderInfo.discount_info 198 },
189 let totalDiscount = 0 199 methods: {
190 if (discountInfoList) { 200 // 取消订单
191 discountInfoList.map((discountItem, index) => { 201 timeup() {
192 totalDiscount += Number(discountItem.value) 202 this.cancleOrder();
193 }) 203 },
194 } 204 cancleOrder() {
195 // console.log(totalDiscount) 205 const uid = this.uid;
196 return totalDiscount 206 const openid = this.openid;
197 }, 207 uni.showModal({
198 }, 208 title: "提示",
199 methods: { 209 content: "现在取消，订单不可恢复哦，确认取消吗？",
200 // 取消订单 210 success: function(res) {
201 timeup () { 211 if (res.confirm) {
202 this.cancleOrder() 212 store.dispatch("cancelOrder/cancel", {
203 }, 213 keyname: "1",
204 cancleOrder () { 214 uid: uid,
205 const uid = this.uid 215 openid: openid
206 const openid = this.openid 216 });
207 uni.showModal({ 217 } else if (res.cancel) {
208 title: '提示', 218 console.log("用户点击取消");
209 content: '现在取消，订单不可恢复哦，确认取消吗？', 219 }
210 success: function (res) { 220 }
211 if (res.confirm) { 221 });
212 store.dispatch('cancelOrder/cancel', { 222 },
213 keyname: '1', 223 paylog() {},
214 uid: uid, 224 confirmOrder() {
215 openid: openid, 225 store
216 }) 226 .dispatch("statusConfirm/confirm", {
217 } else if (res.cancel) { 227 uid: this.uid,
218 console.log('用户点击取消') 228 openid: this.openid,
219 } 229 oldway: "1",
220 }, 230 way: "2",
221 }) 231 pay_id: this.payId,
222 }, 232 judgeContent: "",
223 paylog () { 233 orderInfo: this.orderInfo.order_info
224 234 })
225 }, 235 .then(
226 confirmOrder () { 236 setTimeout(() => {
227 store.dispatch('statusConfirm/confirm', { 237 uni.navigateBack();
228 uid: this.uid, 238 }, 1500)
229 openid: this.openid, 239 );
230 oldway: '1', 240 }
231 way: '2', 241 },
232 pay_id: this.payId, 242 filters: {
233 judgeContent: '', 243 timerChange: function(value) {
234 orderInfo: this.orderInfo.order_info, 244 var newDate = new Date();
235 }).then( 245 newDate.setTime(value * 1000);
236 setTimeout(() => { 246 return newDate.toLocaleString();
237 uni.navigateBack() 247 }
238 }, 1500), 248 }
239 ) 249 };
240 }, 250 </script>
241 }, 251
242 filters: { 252 <style lang="scss" scoped>
243 timerChange: function(value) { 253 .content {
244 var newDate = new Date() 254 min-height: 100vh;
245 newDate.setTime(value * 1000) 255 display: flex;
246 return newDate.toLocaleString() 256 flex-direction: column;
247 }, 257 justify-content: flex-start;
248 }, 258 align-items: center;
249 } 259 background-color: #f2f2f2;
250 </script> 260 }
251 261
252 <style lang="scss" scoped> 262 .order {
253 .content { 263 margin-bottom: 112rpx;
254 min-height: 100vh; 264 background: #f2f2f2;
255 display: flex; 265 margin-top: 140rpx;
256 flex-direction: column; 266 width: 670rpx;
257 justify-content: flex-start; 267 }
258 align-items: center; 268
259 background-color: #f2f2f2; 269 .order-time {
260 } 270 width: 100%;
261 271 height: 140rpx;
262 .order { 272 background-color: #fff;
263 margin-bottom: 112rpx; 273 display: flex;
264 background: #f2f2f2; 274 justify-content: center;
265 margin-top: 140rpx; 275 align-items: center;
266 width: 670rpx; 276 position: fixed;
267 } 277 top: 0;
268 278 left: 0;
269 .order-time { 279 text {
270 width: 100%; 280 // font-family: PingFangSC-Regular;
271 height: 140rpx; 281 // margin-top: 48rpx;
272 background-color: #fff; 282 font-size: 14px;
273 display: flex; 283 color: #333333;
274 justify-content: center; 284 letter-spacing: -0.26px;
275 align-items: center; 285 }
276 position: fixed; 286 .p2 {
277 top: 0; 287 // font-family: DINAlternate-Bold;
278 left: 0; 288 margin: 42rpx 20rpx 0 20rpx;
279 text { 289 font-size: 18px;
280 // font-family: PingFangSC-Regular; 290 color: #ec5d3b;
281 // margin-top: 48rpx; 291 letter-spacing: -0.34px;
282 font-size: 14px; 292 }
283 color: #333333; 293 }
284 letter-spacing: -0.26px; 294 .headerBanner {
285 } 295 width: 100%;
286 .p2 { 296 height: 140rpx;
287 // font-family: DINAlternate-Bold; 297 background: #4a90e2;
288 margin: 42rpx 20rpx 0 20rpx; 298 padding: 26rpx 60rpx 24rpx 60rpx;
289 font-size: 18px; 299 box-sizing: border-box;
290 color: #ec5d3b; 300 color: #ffffff;
291 letter-spacing: -0.34px; 301 display: flex;
292 } 302 justify-content: space-between;
293 } 303 align-items: center;
294 .headerBanner { 304 position: fixed;
295 width: 100%; 305 top: 0;
296 height: 140rpx; 306 left: 0;
297 background: #4a90e2; 307 .bannerLeft {
298 padding: 26rpx 60rpx 24rpx 60rpx; 308 font-size: 36rpx;
299 box-sizing: border-box; 309 display: flex;
300 color: #ffffff; 310 flex-direction: column;
301 display: flex; 311 justify-content: center;
302 justify-content: space-between; 312 align-items: center;
303 align-items: center; 313 .T2 {
304 position: fixed; 314 font-size: 24rpx;
305 top: 0; 315 }
306 left: 0; 316 }
307 .bannerLeft { 317 image {
308 font-size: 36rpx; 318 height: 56rpx;
309 display: flex; 319 width: 72rpx;
310 flex-direction: column; 320 }
311 justify-content: center; 321 }
312 align-items: center; 322
313 .T2 { 323 .order-user {
314 font-size: 24rpx; 324 height: 228rpx;
315 } 325 background: #ffffff;
316 } 326 border-radius: 14rpx;
317 image { 327 margin: 0 auto;
318 height: 56rpx; 328 margin-top: 20rpx;
319 width: 72rpx; 329 margin-bottom: 20rpx;
320 } 330 .order-user-head {
321 } 331 display: flex;
322 332 height: 108rpx;
323 .order-user { 333 align-items: center;
324 height: 228rpx; 334 margin-left: 126rpx;
325 background: #ffffff; 335 .p1 {
326 border-radius: 14rpx; 336 // font-family: PingFangSC-Regular;
327 margin: 0 auto; 337 font-size: 14px;
328 margin-top: 20rpx; 338 color: #333333;
329 margin-bottom: 20rpx; 339 letter-spacing: -0.26px;
330 .order-user-head { 340 margin-right: 20rpx;
331 display: flex; 341 }
332 height: 108rpx; 342 .p2 {
333 align-items: center; 343 // font-family: PingFangSC-Regular;
334 margin-left: 126rpx; 344 font-size: 14px;
335 .p1 { 345 color: #999999;
336 // font-family: PingFangSC-Regular; 346 letter-spacing: -0.26px;
337 font-size: 14px; 347 }
338 color: #333333; 348 }
339 letter-spacing: -0.26px; 349 .order-user-body {
340 margin-right: 20rpx; 350 display: flex;
341 } 351 width: 100%;
342 .p2 { 352 image {
343 // font-family: PingFangSC-Regular; 353 width: 24px;
344 font-size: 14px; 354 height: 26px;
345 color: #999999; 355 margin: 12rpx 32rpx 0 40rpx;
346 letter-spacing: -0.26px; 356 }
347 } 357 .p3 {
348 } 358 // font-family: PingFangSC-Semibold;
349 .order-user-body { 359 font-size: 14px;
350 display: flex; 360 color: #333333;
351 width: 100%; 361 letter-spacing: -0.26px;
352 image { 362 }
353 width: 24px; 363 }
354 height: 26px; 364 }
355 margin: 12rpx 32rpx 0 40rpx; 365
356 } 366 .order-info {
357 .p3 { 367 background-color: #fff;
358 // font-family: PingFangSC-Semibold; 368 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06);
359 font-size: 14px; 369 border-radius: 16rpx;
360 color: #333333; 370 margin: 0 auto;
361 letter-spacing: -0.26px; 371 view {
362 } 372 margin-left: 40rpx;
363 } 373 }
364 } 374 text {
365 375 font-size: 14px;
366 .order-info { 376 }
367 background-color: #fff; 377 .order-info-head {
368 box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); 378 display: flex;
369 border-radius: 16rpx; 379 padding-top: 40rpx;
370 margin: 0 auto; 380 image {
371 view { 381 height: 188rpx;
372 margin-left: 40rpx; 382 width: 188rpx;
373 } 383 }
374 text { 384 .order-info-head-r {
375 font-size: 14px; 385 margin: 0;
376 } 386 width: 368rpx;
377 .order-info-head { 387 margin-left: 24rpx;
378 display: flex; 388 // margin-top: 40rpx;
379 padding-top: 40rpx; 389 text {
380 image { 390 display: block;
381 height: 188rpx; 391 }
382 width: 188rpx; 392 // .arrow{
383 } 393 // width: 0;
384 .order-info-head-r { 394 // height: 0;
385 margin: 0; 395 // border-left: 5px transparent;
386 width: 368rpx; 396 // border-right: 5px transparent;
387 margin-left: 24rpx; 397 // border-top: 5px #979797;
388 // margin-top: 40rpx; 398 // border-bottom: 0 transparent;
389 text { 399 // border-style: solid;
390 display: block; 400 // position: relative;
391 } 401 // // transform: scaleY(-1);
392 // .arrow{ 402 // }
393 // width: 0; 403 // .arrow::after{
394 // height: 0; 404 // content: '';
395 // border-left: 5px transparent; 405 // position: absolute;
396 // border-right: 5px transparent; 406 // top: -6.5px;
397 // border-top: 5px #979797; 407 // left: -5px;
398 // border-bottom: 0 transparent; 408 // border-left: 5px transparent;
399 // border-style: solid; 409 // border-right: 5px transparent;
400 // position: relative; 410 // border-top: 5px #FFFFFF;
401 // // transform: scaleY(-1); 411 // border-bottom: 0 transparent;
402 // } 412 // border-style: solid;
403 // .arrow::after{ 413 // }
404 // content: ''; 414 .p1 {
405 // position: absolute; 415 min-height: 40px;
406 // top: -6.5px; 416 // font-family: PingFangSC-Regular;
407 // left: -5px; 417 font-size: 14px;
408 // border-left: 5px transparent; 418 color: #333333;
409 // border-right: 5px transparent; 419 letter-spacing: -0.26px;
410 // border-top: 5px #FFFFFF; 420 line-height: 18px;
411 // border-bottom: 0 transparent; 421 // line-height: 20px;
412 // border-style: solid; 422 }
413 // } 423 .p2 {
414 .p1 { 424 height: 34px;
415 min-height: 40px; 425 padding: 1px 0 3px 0;
416 // font-family: PingFangSC-Regular; 426 // font-family: PingFangSC-Regular;
417 font-size: 14px; 427 font-size: 12px;
418 color: #333333; 428 color: #999999;
419 letter-spacing: -0.26px; 429 letter-spacing: -0.23px;
420 line-height: 18px; 430 }
421 // line-height: 20px; 431 .infoText-bottom {
422 } 432 display: flex;
423 .p2 { 433 flex-direction: row;
424 height: 34px; 434 justify-content: flex-start;
425 padding: 1px 0 3px 0; 435 align-items: center;
426 // font-family: PingFangSC-Regular; 436 width: 100%;
427 font-size: 12px; 437 margin-left: 0;
428 color: #999999; 438 .markPrice {
429 letter-spacing: -0.23px; 439 font-size: 14px;
430 } 440 color: #ff6b4a;
431 .infoText-bottom { 441 margin-right: 20rpx;
432 display: flex; 442 margin-left: 0rpx;
433 flex-direction: row; 443 }
434 justify-content: flex-start; 444 .buy-num {
435 align-items: center; 445 font-size: 12px;
436 width: 100%; 446 color: #999999;
437 margin-left: 0; 447 }
438 .markPrice { 448 }
439 font-size: 14px; 449 }
440 color: #ff6b4a; 450 }
441 margin-right: 20rpx; 451 // .order-info-goodsnum {
442 margin-left: 0rpx; 452 // display: flex;
443 } 453 // align-items: center;
444 .buy-num { 454 // justify-content: flex-end;
445 font-size: 12px; 455 // text {
446 color: #999999; 456 // margin-right: 44rpx;
447 } 457 // // ont-family: PingFangSC-Regular;
448 } 458 // font-size: 12px;
449 } 459 // color: #999999;
450 } 460 // letter-spacing: -0.23px;
451 // .order-info-goodsnum { 461 // }
452 // display: flex; 462 // }
453 // align-items: center; 463 .order-info-freight {
454 // justify-content: flex-end; 464 display: block;
455 // text { 465 margin-left: 40rpx;
456 // margin-right: 44rpx; 466 margin-top: 22rpx;
457 // // ont-family: PingFangSC-Regular; 467 .p1 {
458 // font-size: 12px; 468 // font-family: PingFangSC-Regular;
459 // color: #999999; 469 font-size: 14px;
460 // letter-spacing: -0.23px; 470 color: #333333;
461 // } 471 letter-spacing: -0.26px;
462 // } 472 line-height: 18px;
463 .order-info-freight { 473 margin-right: 24px;
464 display: block; 474 }
465 margin-left: 40rpx; 475 .p2 {
466 margin-top: 22rpx; 476 // font-family: PingFangSC-Regular;
467 .p1 { 477 font-size: 14px;
468 // font-family: PingFangSC-Regular; 478 color: #ff6b4a;
469 font-size: 14px; 479 letter-spacing: -0.26px;
470 color: #333333; 480 }
471 letter-spacing: -0.26px; 481 }
472 line-height: 18px; 482 .order-info-discount {
473 margin-right: 24px; 483 display: block;
474 } 484 margin-left: 40rpx;
475 .p2 { 485 margin-top: 24rpx;
476 // font-family: PingFangSC-Regular; 486 .p1 {
477 font-size: 14px; 487 // font-family: PingFangSC-Regular;
478 color: #ff6b4a; 488 font-size: 14px;
479 letter-spacing: -0.26px; 489 color: #333333;
480 } 490 letter-spacing: -0.26px;
481 } 491 line-height: 18px;
482 .order-info-discount { 492 margin-right: 24px;
483 display: block; 493 }
484 margin-left: 40rpx; 494 .p2 {
485 margin-top: 24rpx; 495 // font-family: PingFangSC-Regular;
486 .p1 { 496 font-size: 14px;
487 // font-family: PingFangSC-Regular; 497 color: #ff6b4a;
488 font-size: 14px; 498 letter-spacing: -0.26px;
489 color: #333333; 499 }
490 letter-spacing: -0.26px; 500 }
491 line-height: 18px; 501 .order-info-price {
492 margin-right: 24px; 502 display: block;
493 } 503 margin-left: 40rpx;
494 .p2 { 504 margin-top: 24rpx;
495 // font-family: PingFangSC-Regular; 505 .p1 {
496 font-size: 14px; 506 // font-family: PingFangSC-Semibold;
497 color: #ff6b4a; 507 font-size: 14px;
498 letter-spacing: -0.26px; 508 color: #333333;
499 } 509 letter-spacing: -0.26px;
500 } 510 line-height: 18px;
501 .order-info-price { 511 margin-right: 24px;
502 display: block; 512 }
503 margin-left: 40rpx; 513 .p2 {
504 margin-top: 24rpx; 514 // font-family: PingFangSC-Semibold;
505 .p1 { 515 font-size: 14px;
506 // font-family: PingFangSC-Semibold; 516 color: #ff6b4a;
507 font-size: 14px; 517 letter-spacing: -0.26px;
508 color: #333333; 518 }
509 letter-spacing: -0.26px; 519 }
510 line-height: 18px; 520 .order-info-num {
511 margin-right: 24px; 521 display: block;
512 } 522 margin-left: 40rpx;
513 .p2 { 523 margin-top: 44rpx;
514 // font-family: PingFangSC-Semibold; 524 text {
515 font-size: 14px; 525 // font-family: PingFangSC-Regular;
516 color: #ff6b4a; 526 font-size: 12px;
517 letter-spacing: -0.26px; 527 color: #999999;
518 } 528 letter-spacing: -0.23px;
519 } 529 }
520 .order-info-num { 530 }
521 display: block; 531 .order-info-time {
522 margin-left: 40rpx; 532 display: block;
523 margin-top: 44rpx; 533 margin: 8rpx 0 48rpx 40rpx;
524 text { 534 text {
525 // font-family: PingFangSC-Regular; 535 // font-family: PingFangSC-Regular;
526 font-size: 12px; 536 font-size: 12px;
527 color: #999999; 537 color: #999999;
528 letter-spacing: -0.23px; 538 letter-spacing: -0.23px;
529 } 539 }
530 } 540 }
531 .order-info-time { 541 .order-info-hr {
532 display: block; 542 width: 520rpx;
533 margin: 8rpx 0 48rpx 40rpx; 543 height: 1px;
534 text { 544 background-color: #e9e9e9;
535 // font-family: PingFangSC-Regular; 545 margin-bottom: 20rpx;
536 font-size: 12px; 546 }
537 color: #999999; 547 .order-info-contact {
538 letter-spacing: -0.23px; 548 display: flex;
539 } 549 padding-bottom: 28rpx;
540 } 550 image {
541 .order-info-hr { 551 width: 19px;
542 width: 520rpx; 552 height: 16px;
543 height: 1px; 553 }
544 background-color: #e9e9e9; 554 text {
545 margin-bottom: 20rpx; 555 // font-family: PingFangSC-Regular;
546 } 556 margin-left: 20rpx;
547 .order-info-contact { 557 font-size: 14px;
548 display: flex; 558 color: #333333;
549 padding-bottom: 28rpx; 559 letter-spacing: -0.26px;
550 image { 560 line-height: 18px;
551 width: 19px; 561 }
552 height: 16px; 562 }
553 } 563 }
554 text { 564
555 // font-family: PingFangSC-Regular; 565 .order-confim {
556 margin-left: 20rpx; 566 display: flex;
557 font-size: 14px; 567 align-items: center;
558 color: #333333; 568 justify-content: flex-end;
559 letter-spacing: -0.26px; 569 // z-index: 999;
560 line-height: 18px; 570 width: 100%;
561 } 571 height: 112rpx;
562 } 572 position: fixed;
563 } 573 bottom: 0;
564 574 background: #ffffff;
565 .order-confim { 575 button {
566 display: flex; 576 width: 204rpx;
567 align-items: center; 577 height: 80rpx;
568 justify-content: flex-end; 578 border: 1px solid #ff6b4a;
569 // z-index: 999; 579 border-radius: 40rpx;
570 width: 100%; 580 font-size: 32rpx;
571 height: 112rpx; 581 letter-spacing: -0.3px;
572 position: fixed; 582 margin-right: 0;
573 bottom: 0; 583 }
574 background: #ffffff; 584 .b1 {
575 button { 585 // font-family: PingFangSC-Regular;
576 width: 204rpx; 586 color: #ff6b4a;
577 height: 80rpx; 587 background-color: #ffffff;
578 border: 1px solid #ff6b4a; 588 }
579 border-radius: 40rpx; 589 .b2 {
580 font-size: 32rpx; 590 // font-family: PingFangSC-Regular;
581 letter-spacing: -0.3px; 591 background-color: #ff6b4a;
582 margin-right: 0; 592 color: #ffffff;
583 } 593 margin: 0 26rpx 0 20rpx;
584 .b1 { 594 }
585 // font-family: PingFangSC-Regular; 595 }
586 color: #ff6b4a; 596 </style>
src/pages/user/user.vue
Diff comments   View file @92d01cf
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <!-- 弹窗 --> 3 <!-- 弹窗 -->
4 <uni-popup 4 <uni-popup
5 ref="popup" 5 ref="popup"
6 type="center" 6 type="center"
7 > 7 >
8 <!-- 给一个左边弹窗的样式 --> 8 <!-- 给一个左边弹窗的样式 -->
9 <!-- 关闭弹窗按钮 --> 9 <!-- 关闭弹窗按钮 -->
10 <view 10 <view
11 class="closeBtn" 11 class="closeBtn"
12 @tap="this.$refs.popup.close()" 12 @tap="this.$refs.popup.close()"
13 >x</view> 13 >x</view>
14 <view 14 <view
15 class="popUpWrap" 15 class="popUpWrap"
16 v-if="whichTap==0" 16 v-if="whichTap==0"
17 > 17 >
18 <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text> 18 <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>
19 19
20 <!-- 左 --> 20 <!-- 左 -->
21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> --> 21 <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
22 <!-- 右 --> 22 <!-- 右 -->
23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> --> 23 <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
24 </view> 24 </view>
25 <view 25 <view
26 class="popUpWrap" 26 class="popUpWrap"
27 v-if="whichTap==1" 27 v-if="whichTap==1"
28 > 28 >
29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text> 29 <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
30 </view> 30 </view>
31 <view 31 <view
32 class="popUpWrap" 32 class="popUpWrap"
33 v-if="whichTap==2" 33 v-if="whichTap==2"
34 > 34 >
35 <button @tap="chatOur(1)">客服1</button> 35 <button @tap="chatOur(1)">客服1</button>
36 <button @tap="chatOur(2)">客服2</button> 36 <button @tap="chatOur(2)">客服2</button>
37 </view> 37 </view>
38 </uni-popup> 38 </uni-popup>
39 <!-- <scroll-view 39 <!-- <scroll-view
40 enable-flex 40 enable-flex
41 @scrolltolower="handleScrolltolower" 41 @scrolltolower="handleScrolltolower"
42 scroll-y 42 scroll-y
43 style="height: 1000px;"
44 > -->
45 <view
46 v-if="isAuth"
47 class="content"
48 >
43 style="height: 1000px;" 49 <view class="userInfo">
44 > --> 50 <view class="info">
45 <view 51 <image
46 v-if="isAuth" 52 :src="headerphoto"
47 class="content" 53 mode="aspectFill"
48 > 54 ></image>
49 <view class="userInfo"> 55 <view class="infoText">
50 <view class="info"> 56 <text class="userName">{{nickName}}</text>
51 <image 57 </view>
52 :src="headerphoto" 58 </view>
53 mode="aspectFill" 59 <!-- <view class="service">
54 ></image> 60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
55 <view class="infoText"> 61 </view> -->
56 <text class="userName">{{nickName}}</text> 62 </view>
57 </view> 63 <view
58 </view> 64 class="myOpticsData"
59 <!-- <view class="service"> 65 @tap="toOpticsData"
60 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 66 >
61 </view> --> 67 <view class="left">
62 </view> 68 <image
63 <view 69 src="../../static/img/user/dataWrite.png"
64 class="myOpticsData" 70 mode="aspectFit"
65 @tap="toOpticsData" 71 ></image>
66 > 72 <text>验光数据</text>
67 <view class="left"> 73 </view>
68 <image 74 <image
69 src="../../static/img/user/dataWrite.png" 75 src="../../static/right.png"
70 mode="aspectFit" 76 mode="aspectFit"
71 ></image> 77 ></image>
72 <text>验光数据</text> 78 </view>
73 </view> 79 <view class="myOrder">
74 <image 80 <view class="orderHeader">
75 src="../../static/right.png" 81 <text>我的订单</text>
76 mode="aspectFit" 82 <view
77 ></image> 83 class="btn"
78 </view> 84 @click="toMyOrder('10')"
79 <view class="myOrder"> 85 >
80 <view class="orderHeader"> 86 全部
81 <text>我的订单</text> 87 <image
82 <view 88 src="../../static/right.png"
83 class="btn" 89 mode="aspectFit"
84 @click="toMyOrder('10')" 90 ></image>
85 > 91 </view>
86 全部 92 </view>
87 <image 93 <view class="orderBody">
88 src="../../static/right.png" 94 <view
89 mode="aspectFit" 95 class="item waitPay"
90 ></image> 96 @click="toMyOrder('0')"
91 </view> 97 >
92 </view> 98 <image
93 <view class="orderBody"> 99 src="../../static/img/user/waitDeliver.png"
94 <view 100 mode="aspectFit"
95 class="item waitPay" 101 ></image>
96 @click="toMyOrder('0')" 102 <text>待付款</text>
97 > 103 </view>
98 <image 104 <view
99 src="../../static/img/user/waitDeliver.png" 105 class="item waitDeliver"
100 mode="aspectFit" 106 @click="toMyOrder('1')"
101 ></image> 107 >
102 <text>待付款</text> 108 <image
103 </view> 109 src="../../static/img/user/waitPay.png"
104 <view 110 mode="aspectFit"
105 class="item waitDeliver" 111 ></image>
106 @click="toMyOrder('1')" 112 <text>待收货</text>
107 > 113 </view>
108 <image 114 <view
109 src="../../static/img/user/waitPay.png" 115 class="item waitReceive"
110 mode="aspectFit" 116 @click="toMyOrder('2')"
111 ></image> 117 >
112 <text>待收货</text> 118 <image
113 </view> 119 src="../../static/img/user/waitReceive.png"
114 <view 120 mode="aspectFit"
115 class="item waitReceive" 121 ></image>
116 @click="toMyOrder('2')" 122 <text>已完成</text>
117 > 123 </view>
118 <image 124 <!-- <view class="item service" @click="toMyOrder('3')">
119 src="../../static/img/user/waitReceive.png" 125 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
120 mode="aspectFit" 126 <text>已评价</text>
121 ></image> 127 </view> -->
122 <text>已完成</text> 128 </view>
123 </view> 129 </view>
124 <!-- <view class="item service" @click="toMyOrder('3')"> 130 <view class="someItem">
125 <image src="../../static/img/user/refound.png" mode="aspectFit"></image> 131 <!-- <view class="item">
126 <text>已评价</text> 132 <view class="left">
127 </view> --> 133 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
128 </view> 134 <text>推广记录与收益</text>
129 </view> 135 </view>
130 <view class="someItem"> 136 <image src="../../static/right.png" mode="aspectFit"></image>
131 <!-- <view class="item"> 137 </view> -->
132 <view class="left"> 138 <view class="item">
139 <image
140 src="../../static/address-icon.png"
141 mode="aspectFit"
142 ></image>
133 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> 143 <view class="left">
144 <text @tap="toAddress">地址管理</text>
134 <text>推广记录与收益</text> 145 <image
135 </view> 146 class="image2"
147 src="../../static/right.png"
136 <image src="../../static/right.png" mode="aspectFit"></image> 148 mode="aspectFit"
137 </view> --> 149 ></image>
138 <view class="item">
139 <image 150 </view>
151
152 </view>
153 <view class="item">
140 src="../../static/address-icon.png" 154 <image
141 mode="aspectFit" 155 src="../../static/img/user/introduce.png"
142 ></image> 156 mode="aspectFit"
143 <view class="left"> 157 ></image>
144 <text @tap="toAddress">地址管理</text>
145 <image
146 class="image2" 158 <view class="left">
159 <text @tap="introduce">系统介绍</text>
147 src="../../static/right.png" 160 <image
148 mode="aspectFit" 161 src="../../static/right.png"
149 ></image> 162 mode="aspectFit"
150 </view> 163 ></image>
151
152 </view> 164 </view>
165 </view>
166 <view class="item">
153 <view class="item"> 167 <image
154 <image 168 src="../../static/img/user/joinUs.png"
155 src="../../static/img/user/introduce.png" 169 mode="aspectFit"
156 mode="aspectFit" 170 ></image>
157 ></image>
158 <view class="left">
159 <text @tap="introduce">系统介绍</text> 171 <view class="left">
172 <text @tap="joinUs">加入我们</text>
160 <image 173 <image
161 src="../../static/right.png" 174 src="../../static/right.png"
162 mode="aspectFit" 175 mode="aspectFit"
163 ></image> 176 ></image>
164 </view>
165 </view> 177 </view>
178 </view>
179 <view class="item">
166 <view class="item"> 180 <image
167 <image 181 src="../../static/img/user/service.png"
168 src="../../static/img/user/joinUs.png" 182 mode="aspectFit"
169 mode="aspectFit" 183 ></image>
170 ></image> 184 <view class="left lastLeft">
171 <view class="left"> 185 <text>联系客服</text>
172 <text @tap="joinUs">加入我们</text>
173 <image 186 <image
174 src="../../static/right.png" 187 src="../../static/right.png"
175 mode="aspectFit" 188 mode="aspectFit"
176 ></image> 189 ></image>
177 </view>
178 </view> 190 </view>
179 <view class="item">
180 <image
181 src="../../static/img/user/service.png"
182 mode="aspectFit"
183 ></image> 191 </view>
184 <view class="left lastLeft"> 192 </view>
185 <text>联系客服</text> 193 <view class="recommend">
186 <image 194 <view class="title">
187 src="../../static/right.png" 195 <view class="line"></view>
188 mode="aspectFit" 196 <view class="text">精选推荐</view>
189 ></image> 197 <view class="line"></view>
190 </view> 198 </view>
191 </view> 199 <!-- 商品列表 -->
192 </view> 200 <view class="goods-list">
193 <view class="recommend"> 201 <!-- <scroll-view
194 <view class="title"> 202 enable-flex
195 <view class="line"></view> 203 @scrolltolower="handleScrolltolower"
196 <view class="text">精选推荐</view> 204 scroll-y
197 <view class="line"></view> 205 class="product-list"
198 </view> 206 > -->
207 <view class="product-list">
199 <!-- 商品列表 --> 208 <view
200 <view class="goods-list"> 209 class="product"
201 <!-- <scroll-view 210 v-for="(item, index) in userRecommandList"
202 enable-flex 211 :key="index"
203 @scrolltolower="handleScrolltolower" 212 >
204 scroll-y 213 <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card>
205 class="product-list" 214 </view>
206 > --> 215 </view>
216 <!-- </scroll-view> -->
207 <view class="product-list"> 217 <view class="loading-text">{{loadingText}}</view>
208 <view 218 </view>
209 class="product" 219 </view>
210 v-for="(item, index) in userRecommandList" 220 </view>
211 :key="index" 221 <view
212 > 222 v-else
213 <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card> 223 class="auth"
214 </view> 224 >
215 </view> 225 <view class="icon"></view>
216 <!-- </scroll-view> --> 226 <view class="divider"></view>
217 <view class="loading-text">{{loadingText}}</view> 227 <view class="title">申请获取以下权限</view>
218 </view> 228 <view class="text">获得您的公开信息(昵称、头像等)</view>
219 </view> 229 <button
220 </view> 230 type="primary"
221 <view 231 open-type="getUserInfo"
222 v-else 232 @getuserinfo="onGotUserInfo"
223 class="auth" 233 >授权登陆</button>
224 > 234 </view>
235 <!-- </scroll-view> -->
225 <view class="icon"></view> 236 </view>
226 <view class="divider"></view> 237 </template>
227 <view class="title">申请获取以下权限</view> 238
228 <view class="text">获得您的公开信息(昵称、头像等)</view> 239 <script>
229 <button 240 import Card from '@/components/CommodityCard/CommodityCard.vue'
230 type="primary" 241 import store from '@/store'
231 open-type="getUserInfo" 242 import UniPopup from '@/components/UniPopup/uni-popup.vue'
232 @getuserinfo="onGotUserInfo" 243
233 >授权登陆</button> 244 export default {
234 </view> 245 components: {
235 <!-- </scroll-view> --> 246 Card,
236 </view> 247 UniPopup
237 </template> 248 },
238 249 data() {
239 <script> 250 return {
240 import Card from '@/components/CommodityCard/CommodityCard.vue' 251 isAuth: true, // 是否显示授权页面,
241 import store from '@/store' 252 pagesnum: 1, // 分页请求初始值
242 import UniPopup from '@/components/UniPopup/uni-popup.vue' 253 whichTap: 0 ,// 弹窗渲染选择条件
254 loadingText: '到底了',
255 scrollTop: 0,
256 viewHeight: uni.getSystemInfoSync().windowHeight,
243 257 }
244 export default { 258 },
259 onPageScroll({scrollTop}) {
260 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
261 this.scrollTop = scrollTop;
262 },
245 components: { 263 onLoad() {
246 Card, 264 // 判断是否授权
247 UniPopup 265 uni.getSetting({
248 }, 266 success(res) {
249 data() { 267 console.log('authSetting', res.authSetting)
250 return { 268 if (res.authSetting['scope.userInfo'] === true) {
251 isAuth: true, // 是否显示授权页面, 269 this.isAuth = true
252 pagesnum: 1, // 分页请求初始值 270 } else {
253 whichTap: 0 ,// 弹窗渲染选择条件 271 this.isAuth = false
254 loadingText: '到底了', 272 }
255 scrollTop: 0, 273 }
256 viewHeight: uni.getSystemInfoSync().windowHeight, 274 })
257 } 275 store.dispatch('userRecommand/getRecommandList', {
258 }, 276 uid: this.$store.state.user.userInfo.uid,
259 onPageScroll({scrollTop}) { 277 openid: this.$store.state.user.userInfo.openid,
260 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 278 page: this.pagesnum
261 this.scrollTop = scrollTop; 279 })
262 }, 280 },
281 onReachBottom() {
282 // console.log('usr-my',this.$store.state.user.userInfo)
283 this.pagesnum++
284 store.dispatch('userRecommand/getRecommandList', {
285 uid: this.$store.state.user.userInfo.uid,
286 openid: this.$store.state.user.userInfo.openid,
287 page: this.pagesnum
288 })
289 },
263 onLoad() { 290 computed: {
264 // 判断是否授权 291 nickName() {
265 uni.getSetting({ 292 return this.$store.state.user.userInfo.nickName
266 success(res) { 293 },
267 console.log('authSetting', res.authSetting) 294 headerphoto() {
268 if (res.authSetting['scope.userInfo'] === true) { 295 return this.$store.state.user.userInfo.headerphoto
269 this.isAuth = true 296 },
270 } else { 297 userRecommandList() {
271 this.isAuth = false 298 console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList)
272 } 299 return this.$store.state.userRecommand.recommandList
273 } 300 }
274 }) 301 },
275 store.dispatch('userRecommand/getRecommandList', { 302 methods: {
276 uid: this.$store.state.user.userInfo.uid, 303 // 弹窗
277 openid: this.$store.state.user.userInfo.openid, 304 changeTap(item) {
278 page: this.pagesnum 305 this.whichTap = item
279 }) 306 this.$refs.popup.open()
280 }, 307 },
281 onReachBottom() { 308 chatOur(item) {
282 // console.log('usr-my',this.$store.state.user.userInfo) 309 if (item === 1) {
283 this.pagesnum++ 310 uni.makePhoneCall({
284 store.dispatch('userRecommand/getRecommandList', { 311 phoneNumber: 13376189297 // 客服1 电话
285 uid: this.$store.state.user.userInfo.uid, 312 })
286 openid: this.$store.state.user.userInfo.openid, 313 } else {
287 page: this.pagesnum 314 uni.makePhoneCall({
288 }) 315 phoneNumber: 18014995101 // 客服2 电话
289 }, 316 })
290 computed: { 317 }
291 nickName() { 318 },
292 return this.$store.state.user.userInfo.nickName 319 // 授权
293 }, 320 onGotUserInfo(e) {
294 headerphoto() { 321 if (e.detail.errMsg === 'getUserInfo:ok') {
295 return this.$store.state.user.userInfo.headerphoto 322 const { fromInfo } = this.$store.state.user
296 }, 323 // 用户授权成功
297 userRecommandList() { 324 store.dispatch('user/getUserInfo', fromInfo)
298 console.log('userRecommandList=====>',this.$store.state.userRecommand.recommandList) 325 this.isAuth = true
299 return this.$store.state.userRecommand.recommandList 326 }
300 } 327 },
301 }, 328 toAddress() {
302 methods: { 329 uni.navigateTo({
303 // 弹窗 330 url: '../address/addressList',
304 changeTap(item) { 331 success: res => {},
305 this.whichTap = item 332 fail: () => {},
306 this.$refs.popup.open() 333 complete: () => {}
307 }, 334 })
308 chatOur(item) { 335 },
309 if (item === 1) { 336 introduce() {
310 uni.makePhoneCall({ 337 uni.showModal({
311 phoneNumber: 13376189297 // 客服1 电话 338 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
312 }) 339 showCancel: false
313 } else { 340 })
314 uni.makePhoneCall({ 341 },
315 phoneNumber: 18014995101 // 客服2 电话 342 joinUs() {
316 }) 343 uni.showModal({
317 } 344 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
318 }, 345 showCancel: false
319 // 授权 346 })
320 onGotUserInfo(e) { 347 },
321 if (e.detail.errMsg === 'getUserInfo:ok') { 348 toMyOrder(status) {
322 const { fromInfo } = this.$store.state.user 349 uni.navigateTo({
323 // 用户授权成功 350 url: `../myOrder/myOrder?status=${status}`,
324 store.dispatch('user/getUserInfo', fromInfo) 351 success: res => {},
325 this.isAuth = true 352 fail: () => {},
326 } 353 complete: () => {}
327 }, 354 })
328 toAddress() { 355 },
329 uni.navigateTo({ 356 toOpticsData() {
330 url: '../address/addressList', 357 uni.navigateTo({
331 success: res => {}, 358 url: '../addOpticsData/addOpticsData'
332 fail: () => {}, 359 })
333 complete: () => {}
334 })
335 },
336 introduce() {
337 uni.showModal({
338 content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
339 showCancel: false
340 })
341 },
342 joinUs() { 360 }
343 uni.showModal({ 361 }
344 content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号', 362 }
345 showCancel: false 363 </script>
346 }) 364
347 }, 365 <style lang="scss">
348 toMyOrder(status) { 366 .warp {
349 uni.navigateTo({ 367 font-size: 24rpx;
350 url: `../myOrder/myOrder?status=${status}`, 368 background-color: #f2f2f2;
351 success: res => {}, 369 height: 100vh;
352 fail: () => {}, 370 }
353 complete: () => {} 371 .content {
354 }) 372 display: flex;
355 }, 373 flex-direction: column;
356 toOpticsData() { 374 align-items: center;
357 uni.navigateTo({ 375 justify-content: center;
358 url: '../addOpticsData/addOpticsData' 376 background-color: #f2f2f2;
359 }) 377 }
360 } 378 .userInfo {
361 } 379 background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%);
362 } 380 width: 100%;
363 </script> 381 height: 240rpx;
364 382 color: #ffffff;
365 <style lang="scss"> 383 padding: 60rpx 82rpx 80rpx 44rpx;
366 .warp { 384 box-sizing: border-box;
367 font-size: 24rpx; 385 display: flex;
368 background-color: #f2f2f2; 386 flex-direction: row;
369 height: 100vh; 387 justify-content: space-between;
370 } 388 align-items: flex-start;
371 .content { 389 .info {
372 display: flex; 390 display: flex;
373 flex-direction: column; 391 flex-direction: row;
374 align-items: center; 392 justify-content: space-between;
375 justify-content: center; 393 align-items: center;
376 background-color: #f2f2f2; 394 image {
377 } 395 border-radius: 50rpx;
378 .userInfo { 396 height: 100rpx;
379 background-image: linear-gradient(270deg, #f79067 0%, #FF5F3B 66%); 397 width: 100rpx;
380 width: 100%; 398 margin-right: 40rpx;
381 height: 240rpx; 399 }
382 color: #ffffff; 400 .infoText {
383 padding: 60rpx 82rpx 80rpx 44rpx; 401 display: flex;
384 box-sizing: border-box; 402 flex-direction: column;
385 display: flex; 403 justify-content: space-between;
386 flex-direction: row; 404 align-items: flex-scetart;
387 justify-content: space-between; 405 .userName {
388 align-items: flex-start; 406 font-size: 18px;
389 .info { 407 color: #ffffff;
390 display: flex; 408 margin-bottom: 8rpx;
391 flex-direction: row; 409 }
392 justify-content: space-between; 410 .nickName {
393 align-items: center; 411 font-size: 12px;
394 image { 412 color: #ffffff;
395 border-radius: 50rpx; 413 }
396 height: 100rpx; 414 }
397 width: 100rpx; 415 }
398 margin-right: 40rpx; 416 // .service {
399 } 417 // margin-top: 20rpx;
400 .infoText { 418 // image {
401 display: flex; 419 // height: 36rpx;
402 flex-direction: column; 420 // width: 36rpx;
403 justify-content: space-between; 421 // }
404 align-items: flex-scetart; 422 // }
405 .userName { 423 }
406 font-size: 18px; 424 .myOpticsData {
407 color: #ffffff; 425 width: 670rpx;
408 margin-bottom: 8rpx; 426 height: 120rpx;
409 } 427 background-color: #ffffff;
410 .nickName { 428 border-radius: 6px;
411 font-size: 12px; 429 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
412 color: #ffffff; 430 position: relative;
413 } 431 bottom: 44rpx;
414 } 432 padding: 40rpx;
415 } 433 box-sizing: border-box;
416 // .service { 434 display: flex;
417 // margin-top: 20rpx; 435 justify-content: space-between;
418 // image { 436 align-items: center;
419 // height: 36rpx; 437 .left {
420 // width: 36rpx; 438 font-size: 14px;
421 // } 439 color: #333333;
422 // } 440 display: flex;
423 } 441 align-items: center;
424 .myOpticsData { 442 image {
425 width: 670rpx; 443 margin-right: 32rpx;
426 height: 120rpx; 444 width: 40rpx;
427 background-color: #ffffff; 445 height: 44rpx;
428 border-radius: 6px; 446 }
429 box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1); 447 }
430 position: relative; 448 image {
431 bottom: 44rpx; 449 height: 16px;
432 padding: 40rpx; 450 width: 8px;
433 box-sizing: border-box; 451 }
434 display: flex; 452 }
435 justify-content: space-between; 453 .myOrder {
436 align-items: center; 454 width: 100%;
437 .left { 455 height: 296rpx;
438 font-size: 14px; 456 // margin-top: 116rpx;
439 color: #333333; 457 margin-bottom: 20rpx;
440 display: flex; 458 padding: 0 40rpx;
441 align-items: center; 459 box-sizing: border-box;
442 image { 460 background: #ffffff;
443 margin-right: 32rpx; 461 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
444 width: 40rpx; 462 border-radius: 6px;
445 height: 44rpx; 463 border-radius: 6px;
446 } 464 display: flex;
447 } 465 flex-direction: column;
448 image { 466 justify-content: space-around;
449 height: 16px; 467 align-items: center;
450 width: 8px; 468 .orderHeader {
451 } 469 width: 100%;
452 } 470 height: 100rpx;
453 .myOrder { 471 display: flex;
454 width: 100%; 472 flex-direction: row;
455 height: 296rpx; 473 justify-content: space-between;
456 // margin-top: 116rpx; 474 align-items: center;
457 margin-bottom: 20rpx; 475 border-bottom: 1px solid #F5F5F5;
458 padding: 0 40rpx; 476 font-weight: bold;
459 box-sizing: border-box; 477 font-size: 18px;
460 background: #ffffff; 478 color: #333333;
461 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 479 .btn {
462 border-radius: 6px; 480 font-size: 12px;
463 border-radius: 6px; 481 color: #999999;
464 display: flex; 482 display: flex;
465 flex-direction: column; 483 align-items: center;
466 justify-content: space-around; 484 image {
467 align-items: center; 485 margin-left: 20rpx;
468 .orderHeader { 486 height: 32rpx;
469 width: 100%; 487 width: 16rpx;
470 height: 100rpx; 488 }
471 display: flex; 489 }
472 flex-direction: row; 490 }
473 justify-content: space-between; 491 .orderBody {
474 align-items: center; 492 width: 100%;
475 border-bottom: 1px solid #F5F5F5; 493 display: flex;
476 font-weight: bold; 494 flex-direction: row;
477 font-size: 18px; 495 justify-content: space-around;
478 color: #333333; 496 align-items: center;
479 .btn { 497 .item {
480 font-size: 12px; 498 display: flex;
481 color: #999999; 499 flex-direction: column;
482 display: flex; 500 align-items: center;
483 align-items: center; 501 image {
484 image { 502 width: 62rpx;
485 margin-left: 20rpx; 503 height: 46rpx;
486 height: 32rpx; 504 }
487 width: 16rpx; 505 text {
488 } 506 margin-top: 24rpx;
489 } 507 font-size: 12px;
490 } 508 color: #333333;
491 .orderBody { 509 }
492 width: 100%; 510 }
493 display: flex; 511 }
494 flex-direction: row; 512 }
495 justify-content: space-around; 513 .someItem {
496 align-items: center; 514 width: 100%;
497 .item { 515 height: 336rpx;
498 display: flex; 516 background: #ffffff;
499 flex-direction: column; 517 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
500 align-items: center; 518 border-radius: 6px;
501 image { 519 border-radius: 6px;
502 width: 62rpx; 520 margin-bottom: 18rpx;
503 height: 46rpx; 521 box-sizing: border-box;
504 } 522 padding: 21rpx 48rpx 21rpx 42rpx;
505 text { 523 box-sizing: border-box;
506 margin-top: 24rpx; 524 display: flex;
507 font-size: 12px; 525 flex-direction: column;
508 color: #333333; 526 justify-content: space-between;
509 } 527 align-items: center;
510 } 528 .item {
511 } 529 display: grid;
512 } 530 grid-template-columns: 10% 90%;
513 .someItem {
514 width: 100%; 531 align-items: center;
515 height: 336rpx; 532 height: 72rpx;
516 background: #ffffff; 533 width: 100%;
517 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 534 .left {
518 border-radius: 6px; 535 font-size: 14px;
519 border-radius: 6px; 536 color: #333333;
520 margin-bottom: 18rpx; 537 display: flex;
521 box-sizing: border-box; 538 align-items: center;
539 justify-content: space-between;
540 height: 72rpx;
541 border-bottom: 1px solid #F2F2F2;
522 padding: 21rpx 48rpx 21rpx 42rpx; 542 image {
523 box-sizing: border-box; 543 margin-right: 0;
524 display: flex; 544 height: 16px;
525 flex-direction: column; 545 width: 8px;
526 justify-content: space-between; 546 }
527 align-items: center; 547 }
528 .item { 548 image {
529 display: grid; 549 margin-right: 32rpx;
530 grid-template-columns: 10% 90%; 550 width: 40rpx;
551 height: 44rpx;
531 align-items: center; 552 }
553 .lastLeft{
554 border-bottom: none;
555 }
532 height: 72rpx; 556 }
533 width: 100%; 557 }
534 .left { 558 .recommend {
535 font-size: 14px; 559 background: #ffffff;
536 color: #333333; 560 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
537 display: flex; 561 border-radius: 6px;
538 align-items: center; 562 border-radius: 6px;
539 justify-content: space-between; 563 width: 100%;
540 height: 72rpx; 564 .title {
541 border-bottom: 1px solid #F2F2F2; 565 display: flex;
542 image { 566 flex-direction: row;
543 margin-right: 0; 567 align-items: center;
544 height: 16px; 568 justify-content: space-between;
545 width: 8px; 569 padding: 20rpx 40rpx;
546 } 570 .line {
547 } 571 width: 264rpx;
548 image { 572 height: 1rpx;
549 margin-right: 32rpx; 573 border-bottom: 1px solid #eaeaea;
550 width: 40rpx; 574 }
551 height: 44rpx; 575 .text {
552 } 576 font-family: PingFangSC-Medium;
553 .lastLeft{ 577 font-size: 14px;
554 border-bottom: none; 578 color: #333333;
555 } 579 letter-spacing: -0.26px;
556 } 580 text-align: justify;
557 } 581 line-height: 24px;
558 .recommend { 582 }
559 background: #ffffff; 583 }
560 box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1); 584 .goods-list {
561 border-radius: 6px; 585 .loading-text {
562 border-radius: 6px; 586 width: 100%;
563 width: 100%; 587 display: flex;
564 .title { 588 justify-content: center;
565 display: flex; 589 align-items: center;
566 flex-direction: row; 590 height: 30px;
567 align-items: center; 591 color: #979797;
568 justify-content: space-between; 592 font-size: 12px;
569 padding: 20rpx 40rpx; 593 }
570 .line { 594 .product-list {
571 width: 264rpx; 595 width: 92%;
572 height: 1rpx; 596 padding: 0 4% 3vw 4%;
573 border-bottom: 1px solid #eaeaea; 597 display: flex;
574 } 598 justify-content: space-between;
575 .text { 599 flex-wrap: wrap;
576 font-family: PingFangSC-Medium;
577 font-size: 14px; 600 .product {
578 color: #333333; 601 width: 48%;
579 letter-spacing: -0.26px; 602 margin: 0 0 20rpx 0;
580 text-align: justify; 603 background: #ffffff;
581 line-height: 24px; 604 border: 1px solid #f2f2f2;
582 } 605 }
583 } 606 }
584 .goods-list { 607 }
585 .loading-text { 608 }
586 width: 100%; 609 .auth {
587 display: flex; 610 height: 100vh;
588 justify-content: center; 611 display: flex;
589 align-items: center; 612 flex-direction: column;
590 height: 30px; 613 align-items: center;
591 color: #979797; 614 .icon {
592 font-size: 12px; 615 width: 140rpx;
593 } 616 height: 140rpx;
594 .product-list { 617 border-radius: 50%;
595 width: 92%; 618 margin-top: 100rpx;
596 padding: 0 4% 3vw 4%; 619 background-color: grey;
597 display: flex; 620 }
598 justify-content: space-between; 621 .divider {
599 flex-wrap: wrap; 622 height: 1rpx;
600 .product { 623 width: 600rpx;
601 width: 48%; 624 margin-top: 80rpx;
602 margin: 0 0 20rpx 0; 625 background-color: #e6e3e3;
603 background: #ffffff; 626 }
604 border: 1px solid #f2f2f2; 627 .title {
605 } 628 width: 600rpx;
606 } 629 margin-top: 50rpx;
607 } 630 text-align: left;
608 } 631 }
src/static/chat_logo.png
Diff comments   View file @92d01cf

3.92 KB
src/static/easy-loadimage/loadfail.png
Diff comments   View file @92d01cf

3.42 KB
src/static/easy-loadimage/loading.gif
Diff comments   View file @92d01cf

16.9 KB
src/static/icon-data.png
Diff comments   View file @92d01cf

1.09 KB | W: | H:

1.09 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/dataWrite.png
Diff comments   View file @92d01cf

515 Bytes | W: | H:

515 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/introduce.png
Diff comments   View file @92d01cf

618 Bytes | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/img/user/joinUs.png
Diff comments   View file @92d01cf

2.07 KB | W: | H:

2.07 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/joinUs (2).png
Diff comments   View file @92d01cf

618 Bytes | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/static/tab-cart.png
Diff comments   View file @92d01cf

1.47 KB | W: | H:

1.47 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/store/modules/address.js
Diff comments   View file @92d01cf
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias 4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias
5 5
6 const state = { list: [], detail: {}, defaultInfo: {} } 6 const state = { list: [], detail: {}, defaultInfo: {} }
7 7
8 const mutations = { 8 const mutations = {
9 LIST: (state, list) => { 9 LIST: (state, list) => {
10 state.list = list 10 state.list = list
11 }, 11 },
12 DETAILS: (state, details) => { 12 DETAILS: (state, details) => {
13 state.details = details 13 state.details = details
14 }, 14 },
15 DEFAULT: (state, data) => { 15 DEFAULT: (state, data) => {
16 state.defaultInfo = data 16 state.defaultInfo = data
17 }, 17 },
18 } 18 }
19 19
20 const actions = { 20 const actions = {
21 edit(mutations, param, success) { 21 edit(mutations, param, success) {
22 return new Promise((resolve) => request({ 22 return new Promise((resolve) => request({
23 url: editAddress, 23 url: editAddress,
24 data: param, 24 data: param,
25 success: () => { 25 success: () => {
26 resolve() 26 resolve()
27 }, 27 },
28 fail: () => { 28 fail: () => {
29 uni.showModal({ 29 uni.showModal({
30 content: '编辑失败', 30 content: '编辑失败',
31 showCancel: false, 31 showCancel: false,
32 }) 32 })
33 }, 33 },
34 complete: (res) => { 34 complete: (res) => {
35 console.log('complete status === > ', res) 35 console.log('complete status === > ', res)
36 }, 36 },
37 })) 37 }))
38 }, 38 },
39 list({ commit }) { 39 list({ commit }) {
40 request({ 40 request({
41 url: addressList, 41 url: addressList,
42 success: (res) => { 42 success: (res) => {
43 commit('LIST', res.data.data) 43 commit('LIST', res.data.data)
44 }, 44 },
45 fail: () => { 45 fail: () => {
46 uni.showModal({ 46 uni.showModal({
47 content: '获取地址列表失败', 47 content: '获取地址列表失败',
48 showCancel: false, 48 showCancel: false,
49 }) 49 })
50 }, 50 },
51 }) 51 })
52 }, 52 },
53 details({ commit }, param) { 53 details({ commit }, param) {
54 return new Promise((resolve, reject) => request({ 54 return new Promise((resolve, reject) => request({
55 url: getAddress, 55 url: getAddress,
56 data: param, 56 data: param,
57 success: (res) => { 57 success: (res) => {
58 commit('DETAILS', res.data.data) 58 commit('DETAILS', res.data.data)
59 resolve({ 59 resolve({
60 code: res.data.code, 60 code: res.data.code,
61 data: res.data.data, 61 data: res.data.data,
62 }) 62 })
63 }, 63 },
64 fail: () => { 64 fail: () => {
65 uni.showModal({ 65 uni.showModal({
66 content: '获取地址信息失败', 66 content: '获取地址信息失败',
67 showCancel: false, 67 showCancel: false,
68 }) 68 })
69 }, 69 },
70 })) 70 }))
71 }, 71 },
72 default({ commit }, param) { 72 default({ commit }, param) {
73 return new Promise((resolve, reject) => request({ 73 return new Promise((resolve, reject) => request({
74 url: getDefaultAddress, 74 url: getDefaultAddress,
75 data: param, 75 data: param,
76 success: (res) => { 76 success: (res) => {
77 resolve({ 77 resolve({
78 code: res.data.code, 78 code: res.data.code,
79 data: res.data.data, 79 data: res.data.data,
80 }) 80 })
81 }, 81 },
82 fail: () => { 82 fail: () => {
83 uni.showModal({ 83 uni.showModal({
84 content: '获取默认地址信息失败', 84 content: '获取默认地址信息失败',
85 showCancel: false, 85 showCancel: false,
86 }) 86 })
87 }, 87 },
88 })) 88 }))
89 }, 89 },
90 } 90 }
91 91
92 export default { 92 export default {
93 namespaced: true, 93 namespaced: true,
94 state, 94 state,
95 mutations, 95 mutations,
96 actions, 96 actions,
97 } 97 }
98 98
src/store/modules/cart.js
Diff comments   View file @92d01cf
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 }
src/store/modules/index.js
Diff comments   View file @92d01cf
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 category, 5 category,
6 shopList, 6 shopList,
7 search, 7 search,
8 } = urlAlias; 8 } = urlAlias;
9 9
10 const state = { 10 const state = {
11 categoryList: [], 11 categoryList: [],
12 list: [] 12 list: []
13 }; 13 };
14 14
15 const mutations = { 15 const mutations = {
16 LIST: (state, list) => { 16 LIST: (state, list) => {
17 state.list = list; 17 state.list = list;
18 }, 18 },
19 CATEGORY: (state, categoryList) => { 19 CATEGORY: (state, categoryList) => {
20 state.categoryList = categoryList; 20 state.categoryList = categoryList;
21 } 21 }
22 }; 22 };
23 23
24 const actions = { 24 const actions = {
25 category({ commit }, param) { 25 category({ commit }, param) {
26 request({ 26 request({
27 url: category, 27 url: category,
28 success: (res) => { 28 success: (res) => {
29 console.log('category', res); 29 console.log('category', res);
30 let data = res.data.data; 30 let data = res.data.data;
31 for(let i = 0; i<=data.length; i++) { 31 for(let i = 0; i<=data.length; i++) {
32 if(data[i] && data[i].type !== 'filter'){ 32 if(data[i] && data[i].type !== 'filter'){
33 data[i].type = 'hierarchy'; 33 data[i].type = 'hierarchy';
34 } 34 }
35 } 35 }
36 data.unshift({ 36 data.unshift({
37 type: "hierarchy", 37 type: "hierarchy",
38 name: "全部", 38 name: "全部",
39 value: "all", 39 value: "all",
40 isNoPull: true, 40 isNoPull: true,
41 }); 41 });
42 commit('CATEGORY', data); 42 commit('CATEGORY', data);
43 }, 43 },
44 fail: (res) => { 44 fail: (res) => {
45 console.log("fail status === > ", res); 45 console.log("fail status === > ", res);
46 }, 46 },
47 complete: (res) => { 47 complete: (res) => {
48 console.log("complete status === > ", res); 48 console.log("complete status === > ", res);
49 }, 49 },
50 }) 50 })
51 }, 51 },
52 list({ commit }, param) { 52 list({ commit }, param) {
53 request({ 53 request({
54 url: shopList, 54 url: shopList,
55 success: (res) => { 55 success: (res) => {
56 commit('LIST', res.data.data) 56 commit('LIST', res.data.data)
57 }, 57 },
58 fail: (res) => { 58 fail: (res) => {
59 console.log("fail status === > ", res); 59 console.log("fail status === > ", res);
60 }, 60 },
61 complete: (res) => { 61 complete: (res) => {
62 console.log("complete status === > ", res); 62 console.log("complete status === > ", res);
63 }, 63 },
64 }) 64 })
65 }, 65 },
66 search({ commit }, { params, keyword }) { 66 search({ commit }, { params, keyword }) {
67 const uid = uni.getStorageSync('uid'); 67 const uid = uni.getStorageSync('uid');
68 console.log("params",params, keyword); 68 console.log("params",params, keyword);
69 request({ 69 request({
70 url: search, 70 url: search,
71 data: { 71 data: {
72 params: JSON.stringify(params), 72 params: JSON.stringify(params),
73 uid, 73 uid,
74 way: 1, 74 way: 1,
75 keyword, 75 keyword,
76 }, 76 },
77 success: (res) => { 77 success: (res) => {
78 commit('LIST', res.data.data); 78 commit('LIST', res.data.data);
79 }, 79 },
80 fail: (res) => { 80 fail: (res) => {
81 console.log("fail status === > ", res); 81 console.log("fail status === > ", res);
82 }, 82 },
83 complete: (res) => { 83 complete: (res) => {
84 console.log("complete status === > ", res); 84 console.log("complete status === > ", res);
85 }, 85 },
86 }) 86 })
87 }, 87 },
88 }; 88 };
89 89
90 export default { 90 export default {
91 namespaced: true, 91 namespaced: true,
92 state, 92 state,
93 mutations, 93 mutations,
94 actions, 94 actions,
95 }; 95 };
96 96
src/store/modules/myOrder.js
Diff comments   View file @92d01cf
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 myOrderList 5 myOrderList
6 } = urlAlias 6 } = urlAlias
7 7
8 // const data = { 8 // const data = {
9 // data: [ 9 // data: [
10 // { 10 // {
11 // finished_time: null, 11 // finished_time: null,
12 // is_refound: "0", 12 // is_refound: "0",
13 // mch_id: "1436019502", 13 // mch_id: "1436019502",
14 // money_of_dcw: "0", 14 // money_of_dcw: "0",
15 // money_of_partner: "0", 15 // money_of_partner: "0",
16 // money_of_shop: "0", 16 // money_of_shop: "0",
17 // orderJudge: false, 17 // orderJudge: false,
18 // order_info: { 18 // order_info: {
19 // address:{ 19 // address:{
20 // cityName: "镇江市", 20 // cityName: "镇江市",
21 // countyName: "丹阳市", 21 // countyName: "丹阳市",
22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司", 22 // detailInfo: "延陵镇柳茹村卫生室附近秀野堂农业发展有限公司",
23 // errMsg: "chooseAddress:ok", 23 // errMsg: "chooseAddress:ok",
24 // nationalCode: "321181", 24 // nationalCode: "321181",
25 // postalCode: "212300", 25 // postalCode: "212300",
26 // provinceName: "江苏省", 26 // provinceName: "江苏省",
27 // telNumber: "15896379277", 27 // telNumber: "15896379277",
28 // userName: "点餐汪客服", 28 // userName: "点餐汪客服",
29 // }, 29 // },
30 // cartinfo:['11', '12'], 30 // cartinfo:['11', '12'],
31 // keyname: "1_1587129366", 31 // keyname: "1_1587129366",
32 // lefttime: 179995, 32 // lefttime: 179995,
33 // list:[ 33 // list:[
34 // { 34 // {
35 // cart_id: "11", 35 // cart_id: "11",
36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg", 36 // imgUrl: "https://glass.xiuyetang.com//upload_jk/4/4_0_3FDA03.jpg",
37 // img_index_url: null, 37 // img_index_url: null,
38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701", 38 // memo: "志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流，01-8701",
39 // mp_id: "1", 39 // mp_id: "1",
40 // nowPrice: 100, 40 // nowPrice: 100,
41 // num: "2", 41 // num: "2",
42 // oldPrice: "0", 42 // oldPrice: "0",
43 // p_discount: "1", 43 // p_discount: "1",
44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", 44 // p_name: "01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流",
45 // p_root_index: "1", 45 // p_root_index: "1",
46 // p_sale_price: "0", 46 // p_sale_price: "0",
47 // peopleName: "me", 47 // peopleName: "me",
48 // pics: '', 48 // pics: '',
49 // pid: "4", 49 // pid: "4",
50 // sk_id: "38", 50 // sk_id: "38",
51 // }, 51 // },
52 // ], 52 // ],
53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品", 53 // orderDesc: "总共包括有：01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流在内的1件商品",
54 // total_fee: 100 54 // total_fee: 100
55 // }, 55 // },
56 // partner_uid: "0", 56 // partner_uid: "0",
57 // pay_cate: "2020", 57 // pay_cate: "2020",
58 // pay_id: "3", 58 // pay_id: "3",
59 // pay_time: "2020-04-17 21:16:12", 59 // pay_time: "2020-04-17 21:16:12",
60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证", 60 // pay_wood_desc: "在【非常戴镜】的微信付款凭证",
61 // pay_wood_id: "fcdj-1-1_1587129366", 61 // pay_wood_id: "fcdj-1-1_1587129366",
62 // prepay_id: "wx172116124528226bf1a8adad1662456500", 62 // prepay_id: "wx172116124528226bf1a8adad1662456500",
63 // re_check_staus: "0", 63 // re_check_staus: "0",
64 // shopid: "0", 64 // shopid: "0",
65 // split_userid: "0", 65 // split_userid: "0",
66 // status: "1", 66 // status: "1",
67 // total_fee: "100", 67 // total_fee: "100",
68 // uid: "1", 68 // uid: "1",
69 // } 69 // }
70 // ], 70 // ],
71 // msg: "订单列表", 71 // msg: "订单列表",
72 // status: 0, 72 // status: 0,
73 // } 73 // }
74 74
75 const state = { 75 const state = {
76 orderList: [], 76 orderList: [],
77 }; 77 };
78 78
79 const mutations = { 79 const mutations = {
80 INIT: (state, data) => { 80 INIT: (state, data) => {
81 state.orderList = data; 81 state.orderList = data;
82 }, 82 },
83 }; 83 };
84 84
85 const actions = { 85 const actions = {
86 getList({ commit }, param) { 86 getList({
87 request({ 87 commit
88 url: myOrderList, 88 }, param) {
89 data: param, 89 request({
90 success: (res) => { 90 url: myOrderList,
91 // console.log(res.data); 91 data: param,
92 commit("INIT", res.data.data); 92 success: (res) => {
93 }, 93 console.log('myOrderList', res.data);
94 commit("INIT", res.data.data);
95 },
94 }) 96 })
95 } 97 }
96 } 98 }
97 99
98 export default { 100 export default {
99 namespaced: true, 101 namespaced: true,
100 state, 102 state,
101 mutations, 103 mutations,
102 actions, 104 actions,
103 } 105 }
src/store/modules/userRecommand.js
Diff comments   View file @92d01cf
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 recommandList 5 recommandList
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 recommandList: [] 9 recommandList: []
10 } 10 }
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, list) => { 13 INIT: (state, list) => {
14 state.recommandList = list 14 state.recommandList = list
15 } 15 }
16 } 16 }
17 17
18 let goodsList = [] 18 let goodsList = []
19 19
20 const actions = { 20 const actions = {
21 getRecommandList({ commit }, param) { 21 getRecommandList({ commit }, param) {
22 request({ 22 request({
23 url: recommandList, 23 url: recommandList,
24 data: param, 24 data: param,
25 success: (res) => { 25 success: (res) => {
26 console.log('ReccomandList请求结果',res.data) 26 console.log('ReccomandList请求结果',res.data)
27 // console.log(res.data.data)
27 // console.log(res.data.data) 28 // const Res={...res.data.data.list,...data.data.list}
28 // const Res={...res.data.data.list,...data.data.list} 29 const data = res.data.data
29 const data = res.data.data 30 for (let index = 0; index < data.length; index++) {
30 for (let index = 0; index < data.length; index++) { 31 goodsList = [...goodsList, ...data[index].list]
31 goodsList = [...goodsList, ...data[index].list] 32 }
32 } 33 commit('INIT', goodsList)
33 commit('INIT', goodsList) 34 },
34 }, 35 fail: (res) => {
35 fail: (res) => { 36 uni.showToast({
36 uni.showToast({ 37 title: '数据加载完了',
37 title: '数据加载完了', 38 icon: 'none'
38 icon: 'none' 39 })
39 }) 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
48 49 export default {
49 export default { 50 namespaced: true,
50 namespaced: true, 51 state,
51 state, 52 mutations,
52 mutations, 53 actions
53 actions 54 }
54 } 55

2.85 KB
File was created 1 /*
2 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
3 * Digest Algorithm, as defined in RFC 1321.
4 * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
5 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
6 * Distributed under the BSD License
7 */
8
9 /*
10 * Configurable variables. You may need to tweak these to be compatible with
11 * the server-side, but the defaults work in most cases.
12 */
13 var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
14 var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
15 var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */
16
17 /*
18 * These are the functions you'll usually want to call
19 * They take string arguments and return either hex or base-64 encoded strings
20 */
21 function hex_md5(s) {
22 return binl2hex(core_md5(str2binl(s), s.length * chrsz));
23 }
24
25 function b64_md5(s) {
26 return binl2b64(core_md5(str2binl(s), s.length * chrsz));
27 }
28
29 function str_md5(s) {
30 return binl2str(core_md5(str2binl(s), s.length * chrsz));
31 }
32
33 function hex_hmac_md5(key, data) {
34 return binl2hex(core_hmac_md5(key, data));
35 }
36
37 function b64_hmac_md5(key, data) {
38 return binl2b64(core_hmac_md5(key, data));
39 }
40
41 function str_hmac_md5(key, data) {
42 return binl2str(core_hmac_md5(key, data));
43 }
44
45 /*
46 * Perform a simple self-test to see if the VM is working
47 */
48 function md5_vm_test() {
49 return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
50 }
51
52 /*
53 * Calculate the MD5 of an array of little-endian words, and a bit length
54 */
55 function core_md5(x, len) {
56 /* append padding */
57 x[len >> 5] |= 0x80 << ((len) % 32);
58 x[(((len + 64) >>> 9) << 4) + 14] = len;
59
60 var a = 1732584193;
61 var b = -271733879;
62 var c = -1732584194;
63 var d = 271733878;
64
65 for (var i = 0; i < x.length; i += 16) {
66 var olda = a;
67 var oldb = b;
68 var oldc = c;
69 var oldd = d;
70
71 a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
72 d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
73 c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
74 b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
75 a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
76 d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
77 c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
78 b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
79 a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
80 d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
81 c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
82 b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
83 a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
84 d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
85 c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
86 b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
87
88 a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
89 d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
90 c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
91 b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
92 a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
93 d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
94 c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
95 b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
96 a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
97 d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
98 c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
99 b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
100 a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
101 d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
102 c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
103 b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
104
105 a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
106 d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
107 c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
108 b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
109 a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
110 d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
111 c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
112 b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
113 a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
114 d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
115 c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
116 b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
117 a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
118 d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
119 c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
120 b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
121
122 a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
123 d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
124 c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
125 b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
126 a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
127 d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
128 c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
129 b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
130 a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
131 d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
132 c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
133 b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
134 a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
135 d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
136 c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
137 b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
138
139 a = safe_add(a, olda);
140 b = safe_add(b, oldb);
141 c = safe_add(c, oldc);
142 d = safe_add(d, oldd);
143 }
144 return Array(a, b, c, d);
145
146 }
147
148 /*
149 * These functions implement the four basic operations the algorithm uses.
150 */
151 function md5_cmn(q, a, b, x, s, t) {
152 return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
153 }
154
155 function md5_ff(a, b, c, d, x, s, t) {
156 return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
157 }
158
159 function md5_gg(a, b, c, d, x, s, t) {
160 return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
161 }
162
163 function md5_hh(a, b, c, d, x, s, t) {
164 return md5_cmn(b ^ c ^ d, a, b, x, s, t);
165 }
166
167 function md5_ii(a, b, c, d, x, s, t) {
168 return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
169 }
170
171 /*
172 * Calculate the HMAC-MD5, of a key and some data
173 */
174 function core_hmac_md5(key, data) {
175 var bkey = str2binl(key);
176 if (bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
177
178 var ipad = Array(16),
179 opad = Array(16);
180 for (var i = 0; i < 16; i++) {
181 ipad[i] = bkey[i] ^ 0x36363636;
182 opad[i] = bkey[i] ^ 0x5C5C5C5C;
183 }
184
185 var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
186 return core_md5(opad.concat(hash), 512 + 128);
187 }
188
189 /*
190 * Add integers, wrapping at 2^32. This uses 16-bit operations internally
191 * to work around bugs in some JS interpreters.
192 */
193 function safe_add(x, y) {
194 var lsw = (x & 0xFFFF) + (y & 0xFFFF);
195 var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
196 return (msw << 16) | (lsw & 0xFFFF);
197 }
198
199 /*
200 * Bitwise rotate a 32-bit number to the left.
201 */
202 function bit_rol(num, cnt) {
203 return (num << cnt) | (num >>> (32 - cnt));
204 }
205
206 /*
207 * Convert a string to an array of little-endian words
208 * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
209 */
210 function str2binl(str) {
211 var bin = Array();
212 var mask = (1 << chrsz) - 1;
213 for (var i = 0; i < str.length * chrsz; i += chrsz)
214 bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
215 return bin;
216 }
217
218 /*
219 * Convert an array of little-endian words to a string
220 */
221 function binl2str(bin) {
222 var str = "";
223 var mask = (1 << chrsz) - 1;
224 for (var i = 0; i < bin.length * 32; i += chrsz)
225 str += String.fromCharCode((bin[i >> 5] >>> (i % 32)) & mask);
226 return str;
227 }
228
229 /*
230 * Convert an array of little-endian words to a hex string.
231 */
232 function binl2hex(binarray) {
233 var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
234 var str = "";
235 for (var i = 0; i < binarray.length * 4; i++) {
236 str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
237 hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
238 }
239 return str;
240 }
241
242 /*
243 * Convert an array of little-endian words to a base-64 string
244 */
245 function binl2b64(binarray) {
246 var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
247 var str = "";
248 for (var i = 0; i < binarray.length * 4; i += 3) {
249 var triplet = (((binarray[i >> 2] >> 8 * (i % 4)) & 0xFF) << 16) |
250 (((binarray[i + 1 >> 2] >> 8 * ((i + 1) % 4)) & 0xFF) << 8) |
251 ((binarray[i + 2 >> 2] >> 8 * ((i + 2) % 4)) & 0xFF);
252 for (var j = 0; j < 4; j++) {
253 if (i * 8 + j * 6 > binarray.length * 32) str += b64pad;
254 else str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F);
255 }
256 }
257 return str;
258 }
259 module.exports = {
260 MD5: hex_md5
261 }