曾 / uniapp-wuduhuajiao

Commit bd83922d0d1a0cbc726bac24d43c7cc5273624f6

Authored by ren
1 parent 61c550e3

登录

Inline Side-by-side
Showing 2 changed files with 377 additions and 308 deletions
uniapp-wuduhuajiao/pages/user/order/order.vue
  View file @bd83922
1 <template> 1 <template>
2 <view class="wanl-order-list"> 2 <view class="wanl-order-list">
3 - <view class="navbar">  
4 - <view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">  
5 - {{ item.text }} 3 + <view class="navbar">
  4 + <view class="nav-item text-df " v-for="(item, index) in navList" :key="item.state"
  5 + :class="{ list_title: tabCurrentIndex === index }" @tap="tabClick(index)">
  6 + {{ item.text }}
  7 + <image src="../../../static/home/border.png"
  8 + style="position: absolute;width: 40rpx;right: -5rpx;bottom: -10rpx;" mode="widthFix"
  9 + v-if="tabCurrentIndex==index"></image>
  10 + </view>
6 </view> 11 </view>
7 - </view>  
8 <swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab"> 12 <swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
9 <swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state"> 13 <swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
10 <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData"> 14 <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
11 <!-- 空白页 --> 15 <!-- 空白页 -->
12 - <wanl-empty text="没有找到任何订单"v-if="tag.loaded === true && tag.orderList.length === 0"/> 16 + <wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0" />
13 <!-- 订单列表 --> 17 <!-- 订单列表 -->
14 <view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock"> 18 <view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock">
15 <view class="head"> 19 <view class="head">
@@ -20,12 +24,15 @@ @@ -20,12 +24,15 @@
20 </view> 24 </view>
21 <view class="margin-right-bj text-sm"> 25 <view class="margin-right-bj text-sm">
22 <text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text> 26 <text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
23 - <text v-if="order.state === 7" class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text> 27 + <text v-if="order.state === 7" class="margin-left-sm wlIcon-lajitong"
  28 + @tap="deleteOrder(order.id,okey)"></text>
24 </view> 29 </view>
25 </view> 30 </view>
26 <!-- 商品 --> 31 <!-- 商品 -->
27 - <view class="goods-box" v-for="(goods, gkey) in order.goods" :key="goods.id" @tap="orderDetails(order.id)">  
28 - <view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view> 32 + <view class="goods-box" v-for="(goods, gkey) in order.goods" :key="goods.id"
  33 + @tap="orderDetails(order.id)">
  34 + <view class="cu-avatar xl margin-right-bj radius"
  35 + :style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
29 <view class="content margin-right-bj"> 36 <view class="content margin-right-bj">
30 <view class="describe"> 37 <view class="describe">
31 <view class="text-cut-2"> 38 <view class="text-cut-2">
@@ -51,30 +58,37 @@ @@ -51,30 +58,37 @@
51 </view> 58 </view>
52 <!-- 底部 --> 59 <!-- 底部 -->
53 <view class="price-box text-sm flex"> 60 <view class="price-box text-sm flex">
54 - <view v-if="order.pay.discount_price > 0" class="margin-right-sm wanl-gray">优惠：<text class="text-price">{{ order.pay.discount_price }}</text></view>  
55 - <view v-if="order.pay.freight_price > 0" class="margin-right-sm wanl-gray">快递：<text class="text-price">{{ order.pay.freight_price }}</text></view> 61 + <view v-if="order.pay.discount_price > 0" class="margin-right-sm wanl-gray">优惠：<text
  62 + class="text-price">{{ order.pay.discount_price }}</text></view>
  63 + <view v-if="order.pay.freight_price > 0" class="margin-right-sm wanl-gray">快递：<text
  64 + class="text-price">{{ order.pay.freight_price }}</text></view>
56 <view>实付款：<text class="text-price">{{ order.pay.price }}</text></view> 65 <view>实付款：<text class="text-price">{{ order.pay.price }}</text></view>
57 </view> 66 </view>
58 <view class="action-box padding-bottom-bj" v-if="order.state == 1"> 67 <view class="action-box padding-bottom-bj" v-if="order.state == 1">
59 - <button class="cu-btn round line-black margin-lr-bj" @tap="editAddress(order.id)">修改地址</button> 68 + <button class="cu-btn round line-black margin-lr-bj"
  69 + @tap="editAddress(order.id)">修改地址</button>
60 <button class="cu-btn round line-black" @tap="cancelOrder(order)">取消订单</button> 70 <button class="cu-btn round line-black" @tap="cancelOrder(order)">取消订单</button>
61 - <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="paymentOrder(order.id)">立即支付</button> 71 + <button class="cu-btn round margin-lr-bj wanl-bg-orange"
  72 + @tap="paymentOrder(order.id)">立即支付</button>
62 </view> 73 </view>
63 <view class="action-box padding-bottom-bj" v-if="order.state == 2"> 74 <view class="action-box padding-bottom-bj" v-if="order.state == 2">
64 <button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button> 75 <button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button>
65 - <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="editAddress(order.id)">修改地址</button> 76 + <button class="cu-btn round margin-lr-bj wanl-bg-orange"
  77 + @tap="editAddress(order.id)">修改地址</button>
66 </view> 78 </view>
67 <view class="action-box padding-bottom-bj" v-if="order.state == 3"> 79 <view class="action-box padding-bottom-bj" v-if="order.state == 3">
68 <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button> 80 <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
69 - <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="confirmOrder(order)">确认收货</button> 81 + <button class="cu-btn round margin-lr-bj wanl-bg-orange"
  82 + @tap="confirmOrder(order)">确认收货</button>
70 </view> 83 </view>
71 <view class="action-box padding-bottom-bj" v-if="order.state == 4"> 84 <view class="action-box padding-bottom-bj" v-if="order.state == 4">
72 <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button> 85 <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
73 - <button class="cu-btn round margin-lr-bj line-black" @tap="commentOrder(order.id)">评论订单</button> 86 + <button class="cu-btn round margin-lr-bj line-black"
  87 + @tap="commentOrder(order.id)">评论订单</button>
74 </view> 88 </view>
75 </view> 89 </view>
76 - <uni-load-more :status="tag.loadingType" :content-text="contentText"/>  
77 - <view class="edgeInsetBottom"></view> 90 + <uni-load-more :status="tag.loadingType" :content-text="contentText" />
  91 + <view class="edgeInsetBottom"></view>
78 </scroll-view> 92 </scroll-view>
79 </swiper-item> 93 </swiper-item>
80 </swiper> 94 </swiper>
@@ -82,291 +96,309 @@ @@ -82,291 +96,309 @@
82 </template> 96 </template>
83 97
84 <script> 98 <script>
85 -export default {  
86 - data() {  
87 - return {  
88 - tabCurrentIndex: 0,  
89 - navList: [  
90 - {  
91 - state: 0,  
92 - text: '全部',  
93 - loadingType: 'more',  
94 - current_page: 1,  
95 - orderList: []  
96 - },  
97 - {  
98 - state: 1,  
99 - text: '待支付',  
100 - loadingType: 'more',  
101 - current_page: 1,  
102 - orderList: []  
103 - },  
104 - {  
105 - state: 2,  
106 - text: '待发货',  
107 - loadingType: 'more',  
108 - current_page: 1,  
109 - orderList: []  
110 - },  
111 - {  
112 - state: 3,  
113 - text: '待收货',  
114 - loadingType: 'more',  
115 - current_page: 1,  
116 - orderList: []  
117 - },  
118 - {  
119 - state: 4,  
120 - text: '待评论',  
121 - loadingType: 'more',  
122 - current_page: 1,  
123 - orderList: [] 99 + export default {
  100 + data() {
  101 + return {
  102 + tabCurrentIndex: 0,
  103 + navList: [{
  104 + state: 0,
  105 + text: '全部',
  106 + loadingType: 'more',
  107 + current_page: 1,
  108 + orderList: []
  109 + },
  110 + {
  111 + state: 1,
  112 + text: '待支付',
  113 + loadingType: 'more',
  114 + current_page: 1,
  115 + orderList: []
  116 + },
  117 + {
  118 + state: 2,
  119 + text: '待发货',
  120 + loadingType: 'more',
  121 + current_page: 1,
  122 + orderList: []
  123 + },
  124 + {
  125 + state: 3,
  126 + text: '待收货',
  127 + loadingType: 'more',
  128 + current_page: 1,
  129 + orderList: []
  130 + },
  131 + {
  132 + state: 4,
  133 + text: '待评论',
  134 + loadingType: 'more',
  135 + current_page: 1,
  136 + orderList: []
  137 + }
  138 + // ,{
  139 + // state: 7,
  140 + // text: '已关闭',
  141 + // loadingType: 'more',
  142 + // current_page: 1,
  143 + // orderList: []
  144 + // }
  145 + ],
  146 + contentText: {
  147 + contentdown: ' ',
  148 + contentrefresh: '正在加载...',
  149 + contentnomore: ''
124 } 150 }
125 - // ,{  
126 - // state: 7,  
127 - // text: '已关闭',  
128 - // loadingType: 'more',  
129 - // current_page: 1,  
130 - // orderList: []  
131 - // }  
132 - ],  
133 - contentText: {  
134 - contentdown: ' ',  
135 - contentrefresh: '正在加载...',  
136 - contentnomore: '' 151 + };
  152 + },
  153 + onLoad(options) {
  154 + if (!options.state) {
  155 + options.state = 0;
137 } 156 }
138 - };  
139 - },  
140 - onLoad(options) {  
141 - if (!options.state) {  
142 - options.state = 0;  
143 - }  
144 - this.tabCurrentIndex = +options.state;  
145 - // #ifndef MP  
146 - this.loadData();  
147 - // #endif  
148 - // #ifdef MP  
149 - if (options.state == 0) { 157 + this.tabCurrentIndex = +options.state;
  158 + // #ifndef MP
150 this.loadData(); 159 this.loadData();
151 - }  
152 - // #endif  
153 - },  
154 - methods: {  
155 - //获取订单列表  
156 - loadData(source) {  
157 - //这里是将订单挂载到tab列表下  
158 - let index = this.tabCurrentIndex;  
159 - let navItem = this.navList[index];  
160 - let state = navItem.state;  
161 - //判断是否最后一页  
162 - if (navItem.loadingType == 'noMore') {  
163 - return;  
164 - }  
165 - //tab切换只有第一次需要加载数据  
166 - if (source === 'tabChange' && navItem.loaded === true) {  
167 - return;  
168 - }  
169 - //防止重复加载  
170 - if (navItem.loadingType === 'loading') {  
171 - return; 160 + // #endif
  161 + // #ifdef MP
  162 + if (options.state == 0) {
  163 + this.loadData();
172 } 164 }
173 - navItem.loadingType = 'loading';  
174 - // 获取列表  
175 - this.$api.get({  
176 - url: '/wanlshop/order/getOrderList',  
177 - data: {  
178 - state: state,  
179 - page: navItem.current_page  
180 - },  
181 - success: res => {  
182 - navItem.current_page = res.current_page; //当前页码  
183 - if (res.last_page === res.current_page) {  
184 - navItem.loadingType = 'noMore';  
185 - } else {  
186 - navItem.loadingType = 'more';  
187 - navItem.current_page++;  
188 - }  
189 - let orderList = res.data.filter(item => {  
190 - //添加不同状态下订单的表现形式  
191 - item = Object.assign(item, this.orderStateExp(item.state));  
192 - //演示数据所以自己进行状态筛选  
193 - if (state === 0) {  
194 - //0为全部订单  
195 - return item;  
196 - }  
197 - return item.state === state;  
198 - });  
199 - orderList.forEach(item => {  
200 - navItem.orderList.push(item);  
201 - });  
202 - //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页  
203 - this.$set(navItem, 'loaded', true);  
204 - }  
205 - });  
206 - },  
207 -  
208 - //swiper 切换  
209 - changeTab(e) {  
210 - this.tabCurrentIndex = e.target.current;  
211 - this.loadData('tabChange'); 165 + // #endif
212 }, 166 },
213 - //顶部tab点击  
214 - tabClick(index) {  
215 - this.tabCurrentIndex = index;  
216 - },  
217 - //删除订单  
218 - deleteOrder(order_id, key) {  
219 - uni.showLoading({  
220 - title: '请稍后'  
221 - });  
222 - this.$api.post({  
223 - url: '/wanlshop/order/delOrder',  
224 - data: {  
225 - id: order_id  
226 - },  
227 - success: res => {  
228 - this.navList[this.tabCurrentIndex].orderList.splice(key, 1);  
229 - uni.hideLoading(); 167 + methods: {
  168 + //获取订单列表
  169 + loadData(source) {
  170 + //这里是将订单挂载到tab列表下
  171 + let index = this.tabCurrentIndex;
  172 + let navItem = this.navList[index];
  173 + let state = navItem.state;
  174 + //判断是否最后一页
  175 + if (navItem.loadingType == 'noMore') {
  176 + return;
230 } 177 }
231 - });  
232 - },  
233 - //取消订单- 设置为7 -全局  
234 - cancelOrder(item) {  
235 - uni.showLoading({  
236 - title: '请稍后'  
237 - });  
238 - // 获取列表  
239 - this.$api.post({  
240 - url: '/wanlshop/order/cancelOrder',  
241 - data: {  
242 - id: item.id  
243 - },  
244 - success: res => {  
245 - let { stateTip, stateTipColor } = this.orderStateExp(7);  
246 - item = Object.assign(item, {  
247 - state: 7,  
248 - stateTip,  
249 - stateTipColor  
250 - });  
251 - this.$store.commit('statistics/order', {  
252 - pay: this.$store.state.statistics.order.pay - 1,  
253 - whole: this.$store.state.statistics.order.whole - 1  
254 - });  
255 - // 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级  
256 - let list = this.navList[1].orderList;  
257 - let index = list.findIndex(val => val.id === item.id);  
258 - index !== -1 && list.splice(index, 1);  
259 - // 删除后修改全部中的为7  
260 - if (this.tabCurrentIndex == 1) {  
261 - let list = this.navList[0].orderList; 178 + //tab切换只有第一次需要加载数据
  179 + if (source === 'tabChange' && navItem.loaded === true) {
  180 + return;
  181 + }
  182 + //防止重复加载
  183 + if (navItem.loadingType === 'loading') {
  184 + return;
  185 + }
  186 + navItem.loadingType = 'loading';
  187 + // 获取列表
  188 + this.$api.get({
  189 + url: '/wanlshop/order/getOrderList',
  190 + data: {
  191 + state: state,
  192 + page: navItem.current_page
  193 + },
  194 + success: res => {
  195 + navItem.current_page = res.current_page; //当前页码
  196 + if (res.last_page === res.current_page) {
  197 + navItem.loadingType = 'noMore';
  198 + } else {
  199 + navItem.loadingType = 'more';
  200 + navItem.current_page++;
  201 + }
  202 + let orderList = res.data.filter(item => {
  203 + //添加不同状态下订单的表现形式
  204 + item = Object.assign(item, this.orderStateExp(item.state));
  205 + //演示数据所以自己进行状态筛选
  206 + if (state === 0) {
  207 + //0为全部订单
  208 + return item;
  209 + }
  210 + return item.state === state;
  211 + });
  212 + orderList.forEach(item => {
  213 + navItem.orderList.push(item);
  214 + });
  215 + //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
  216 + this.$set(navItem, 'loaded', true);
  217 + }
  218 + });
  219 + },
  220 +
  221 + //swiper 切换
  222 + changeTab(e) {
  223 + this.tabCurrentIndex = e.target.current;
  224 + this.loadData('tabChange');
  225 + },
  226 + //顶部tab点击
  227 + tabClick(index) {
  228 + this.tabCurrentIndex = index;
  229 + },
  230 + //删除订单
  231 + deleteOrder(order_id, key) {
  232 + uni.showLoading({
  233 + title: '请稍后'
  234 + });
  235 + this.$api.post({
  236 + url: '/wanlshop/order/delOrder',
  237 + data: {
  238 + id: order_id
  239 + },
  240 + success: res => {
  241 + this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
  242 + uni.hideLoading();
  243 + }
  244 + });
  245 + },
  246 + //取消订单- 设置为7 -全局
  247 + cancelOrder(item) {
  248 + uni.showLoading({
  249 + title: '请稍后'
  250 + });
  251 + // 获取列表
  252 + this.$api.post({
  253 + url: '/wanlshop/order/cancelOrder',
  254 + data: {
  255 + id: item.id
  256 + },
  257 + success: res => {
  258 + let {
  259 + stateTip,
  260 + stateTipColor
  261 + } = this.orderStateExp(7);
  262 + item = Object.assign(item, {
  263 + state: 7,
  264 + stateTip,
  265 + stateTipColor
  266 + });
  267 + this.$store.commit('statistics/order', {
  268 + pay: this.$store.state.statistics.order.pay - 1,
  269 + whole: this.$store.state.statistics.order.whole - 1
  270 + });
  271 + // 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
  272 + let list = this.navList[1].orderList;
262 let index = list.findIndex(val => val.id === item.id); 273 let index = list.findIndex(val => val.id === item.id);
263 - if (index !== -1) {  
264 - list[index].state = 7; 274 + index !== -1 && list.splice(index, 1);
  275 + // 删除后修改全部中的为7
  276 + if (this.tabCurrentIndex == 1) {
  277 + let list = this.navList[0].orderList;
  278 + let index = list.findIndex(val => val.id === item.id);
  279 + if (index !== -1) {
  280 + list[index].state = 7;
  281 + }
265 } 282 }
  283 + uni.hideLoading();
266 } 284 }
267 - uni.hideLoading();  
268 - }  
269 - });  
270 - },  
271 - commentOrder(id){  
272 - this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);  
273 - },  
274 - //支付订单  
275 - paymentOrder(id){  
276 - this.$wanlshop.to(`/pages/user/money/pay?order_id=${id}&order_type=goods`);  
277 - },  
278 - //确认收货- 全局  
279 - confirmOrder(item){  
280 - uni.showLoading({  
281 - title: '请稍后'  
282 - });  
283 - // 获取列表  
284 - this.$api.post({  
285 - url: '/wanlshop/order/confirmOrder',  
286 - data: {  
287 - id: item.id  
288 - },  
289 - success: res => {  
290 - let { stateTip, stateTipColor } = this.orderStateExp(4);  
291 - item = Object.assign(item, {  
292 - state: 4,  
293 - stateTip,  
294 - stateTipColor  
295 - });  
296 - this.$store.commit('statistics/order', {  
297 - receiving: this.$store.state.statistics.order.receiving - 1,  
298 - evaluate: this.$store.state.statistics.order.evaluate + 1  
299 - });  
300 - uni.hideLoading(); 285 + });
  286 + },
  287 + commentOrder(id) {
  288 + this.$wanlshop.to('/pages/user/order/comment?order_id=' + id);
  289 + },
  290 + //支付订单
  291 + paymentOrder(id) {
  292 + this.$wanlshop.to(`/pages/user/money/pay?order_id=${id}&order_type=goods`);
  293 + },
  294 + //确认收货- 全局
  295 + confirmOrder(item) {
  296 + uni.showLoading({
  297 + title: '请稍后'
  298 + });
  299 + // 获取列表
  300 + this.$api.post({
  301 + url: '/wanlshop/order/confirmOrder',
  302 + data: {
  303 + id: item.id
  304 + },
  305 + success: res => {
  306 + let {
  307 + stateTip,
  308 + stateTipColor
  309 + } = this.orderStateExp(4);
  310 + item = Object.assign(item, {
  311 + state: 4,
  312 + stateTip,
  313 + stateTipColor
  314 + });
  315 + this.$store.commit('statistics/order', {
  316 + receiving: this.$store.state.statistics.order.receiving - 1,
  317 + evaluate: this.$store.state.statistics.order.evaluate + 1
  318 + });
  319 + uni.hideLoading();
  320 + }
  321 + });
  322 + },
  323 + //订单状态文字和颜色
  324 + orderStateExp(state) {
  325 + let stateTip = '',
  326 + stateTipColor = '#333';
  327 + switch (+state) {
  328 + case 1:
  329 + stateTip = '等待支付';
  330 + stateTipColor = '#f40';
  331 + break;
  332 + case 2:
  333 + stateTip = '等待卖家发货';
  334 + break;
  335 + case 3:
  336 + stateTip = '卖家已发货';
  337 + break;
  338 + case 4:
  339 + stateTip = '交易成功';
  340 + break;
  341 + case 5:
  342 + stateTip = '交易成功';
  343 + break;
  344 + case 6:
  345 + stateTip = '已完成';
  346 + break;
  347 + case 7:
  348 + stateTip = '订单已关闭';
  349 + stateTipColor = '#777';
  350 + break;
  351 + //更多自定义
301 } 352 }
302 - });  
303 - },  
304 - //订单状态文字和颜色  
305 - orderStateExp(state) {  
306 - let stateTip = '',  
307 - stateTipColor = '#333';  
308 - switch (+state) {  
309 - case 1:  
310 - stateTip = '等待支付';  
311 - stateTipColor = '#f40';  
312 - break;  
313 - case 2:  
314 - stateTip = '等待卖家发货';  
315 - break;  
316 - case 3:  
317 - stateTip = '卖家已发货';  
318 - break;  
319 - case 4:  
320 - stateTip = '交易成功';  
321 - break;  
322 - case 5:  
323 - stateTip = '交易成功';  
324 - break;  
325 - case 6:  
326 - stateTip = '已完成';  
327 - break;  
328 - case 7:  
329 - stateTip = '订单已关闭';  
330 - stateTipColor = '#777';  
331 - break;  
332 - //更多自定义 353 + return {
  354 + stateTip,
  355 + stateTipColor
  356 + };
  357 + },
  358 + getRefund(status) {
  359 + return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
  360 + },
  361 + // 修改地址
  362 + editAddress(id) {
  363 + this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);
  364 + },
  365 + //添加或修改成功之后回调
  366 + async refreshList(address_id, order_id) {
  367 + uni.showLoading({
  368 + title: '正在提交新地址'
  369 + });
  370 + // 获取列表
  371 + this.$api.post({
  372 + url: '/wanlshop/order/editOrderAddress',
  373 + data: {
  374 + id: order_id,
  375 + address_id: address_id
  376 + },
  377 + success: res => {
  378 + this.$wanlshop.msg('地址修改成功');
  379 + uni.hideLoading();
  380 + }
  381 + });
333 } 382 }
334 - return {  
335 - stateTip,  
336 - stateTipColor  
337 - };  
338 - },  
339 - getRefund(status) {  
340 - return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];  
341 - },  
342 - // 修改地址  
343 - editAddress(id) {  
344 - this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);  
345 - },  
346 - //添加或修改成功之后回调  
347 - async refreshList(address_id, order_id) {  
348 - uni.showLoading({  
349 - title: '正在提交新地址'  
350 - });  
351 - // 获取列表  
352 - this.$api.post({  
353 - url: '/wanlshop/order/editOrderAddress',  
354 - data: {  
355 - id: order_id,  
356 - address_id: address_id  
357 - },  
358 - success: res => {  
359 - this.$wanlshop.msg('地址修改成功');  
360 - uni.hideLoading();  
361 - }  
362 - });  
363 } 383 }
364 - }  
365 -}; 384 + };
366 </script> 385 </script>
367 386
368 -<style>  
369 -page {  
370 - height: 100%;  
371 -} 387 +<style lang="scss" scoped>
  388 + page {
  389 + height: 100%;
  390 + }
  391 +
  392 + .list_title {
  393 + width: 133%;
  394 + font-size: 30rpx;
  395 + font-weight: bold;
  396 + // height: 100rpx;
  397 + }
  398 + .scroll-view-item_H {
  399 +
  400 + white-space: nowrap;
  401 + width: 100%;
  402 + // height: 390rpx;
  403 + }
372 </style> 404 </style>
uniapp-wuduhuajiao/pages/wanl-home/detail.vue
  View file @bd83922
1 <template> 1 <template>
2 <view style="background-color: #F7F7F7;"> 2 <view style="background-color: #F7F7F7;">
3 <view class="top flex flex-wrap justify-content-between"> 3 <view class="top flex flex-wrap justify-content-between">
4 - <view class="top-list " v-for="(item,index) of 4">  
5 - <view class="img">  
6 - <image src="../../static/home/index4.png" mode="aspectFill"></image>  
7 - </view>  
8 - <view style="padding: 15rpx;">  
9 - <view style="font-size: 28rpx;font-weight: bold;" class="title">  
10 - 武都新鲜花椒特麻特香家武都新鲜花椒特麻特香家 4 + <view class="top-list " v-for="(item,index) of info.category" :key="index" @click="goNavT(item.id)">
  5 + <view class="img">
  6 + <image :src="'http://t1.sherkxuan.cn/'+item.image" v-if="item.image" mode="aspectFill"></image>
11 </view> 7 </view>
12 - <view class="text">  
13 - 详情请与客服沟通后再下单 8 + <view style="padding: 15rpx;">
  9 + <view style="font-size: 28rpx;font-weight: bold;" class="title">
  10 + {{item.name}}
  11 + </view>
  12 + <view class="text">
  13 + 详情请与客服沟通后再下单
  14 + </view>
14 </view> 15 </view>
15 - </view>  
16 </view> 16 </view>
17 </view> 17 </view>
18 18
19 - <view class="btn flex justify-content-center">  
20 - <view>点击查看更多</view> 19 + <!-- <view class="btn flex justify-content-center">
  20 + <view >点击查看更多{{show}}</view>
21 <uni-icons type="bottom" size="20" color="#3D3D3D"></uni-icons> 21 <uni-icons type="bottom" size="20" color="#3D3D3D"></uni-icons>
22 - </view> 22 + </view> -->
23 23
24 <view style="margin: 20rpx 15rpx;padding-bottom: 20rpx;"> 24 <view style="margin: 20rpx 15rpx;padding-bottom: 20rpx;">
25 - <view class="flex justify-content-between list_user" v-for="(item,index) of 3"> 25 + <view class="flex justify-content-between list_user" v-for="(item,index) of info.user">
26 <view class="flex" style="align-items: center;"> 26 <view class="flex" style="align-items: center;">
27 <view style="width: 120rpx;"> 27 <view style="width: 120rpx;">
28 - <image src="../../static/header.png" style="width: 100%;" mode="widthFix"></image> 28 + <image :src="'http://t1.sherkxuan.cn/'+item.image" style="width: 100%;" mode="widthFix"></image>
29 </view> 29 </view>
30 - <view style="color: #A8A8A8;font-size: 26rpx;margin-left: 20rpx;width: 280rpx;" class="title">武都区xx镇xx村村长武都区xx镇xx村村长武都区xx镇xx村村长武都区xx镇xx村村长</view> 30 + <view style="color: #A8A8A8;font-size: 26rpx;margin-left: 20rpx;max-width: 180rpx;" class="title">{{item.name}}</view>
  31 + <view v-if="item.type==1" class="type">村长</view>
  32 + <view v-if="item.type==2" class="type1">社长</view>
  33 + <view v-if="item.type==3" class="type2">村民</view>
31 </view> 34 </view>
32 35
33 <view class="flex justify-content-between"> 36 <view class="flex justify-content-between">
@@ -43,7 +46,8 @@ @@ -43,7 +46,8 @@
43 export default { 46 export default {
44 data() { 47 data() {
45 return { 48 return {
46 - 49 + info:{},
  50 + show:false
47 } 51 }
48 }, 52 },
49 onLoad(e) { 53 onLoad(e) {
@@ -51,7 +55,11 @@ @@ -51,7 +55,11 @@
51 this.API.wanlshopGetShopInfo({ 55 this.API.wanlshopGetShopInfo({
52 id:this.id 56 id:this.id
53 }).then(res=>{ 57 }).then(res=>{
54 - console.log(res) 58 + this.info=res.data
  59 + this.info.user=this.info.user.sort((a,b)=>{
  60 + return a.type-b.type
  61 + })
  62 + this.$forceUpdate()
55 uni.setNavigationBarTitle({ 63 uni.setNavigationBarTitle({
56 title: res.data.shopname 64 title: res.data.shopname
57 }); 65 });
@@ -62,6 +70,11 @@ @@ -62,6 +70,11 @@
62 uni.navigateTo({ 70 uni.navigateTo({
63 url:url 71 url:url
64 }) 72 })
  73 + },
  74 + goNavT(id){
  75 + uni.navigateTo({
  76 + url: `/pages/product/goods?id=${id}`
  77 + })
65 } 78 }
66 } 79 }
67 } 80 }
@@ -136,4 +149,28 @@ @@ -136,4 +149,28 @@
136 border-radius: 15rpx; 149 border-radius: 15rpx;
137 margin-left: 10rpx; 150 margin-left: 10rpx;
138 } 151 }
  152 + .type{
  153 + color: #2E607C;
  154 + background-color: #E3F5FF;
  155 + font-size: 24rpx;
  156 + border-radius: 15rpx;
  157 + padding: 5rpx 20rpx ;
  158 + margin-left: 20rpx;
  159 + }
  160 + .type1{
  161 + color: #2E7C3B;
  162 + background-color: #E3FFEE;
  163 + font-size: 24rpx;
  164 + border-radius: 15rpx;
  165 + padding: 5rpx 20rpx ;
  166 + margin-left: 20rpx;
  167 + }
  168 + .type2{
  169 + color: #7d71b6;
  170 + background-color: #e1e5ff;
  171 + font-size: 24rpx;
  172 + border-radius: 15rpx;
  173 + padding: 5rpx 20rpx ;
  174 + margin-left: 20rpx;
  175 + }
139 </style> 176 </style>