项目目录架构
所有页面pages
1 addanimal增加宠物页面页
2
3 -------------------------------------------------
4 wxmly:
5
6 <view>
7 <text>爱宠照片</text>
8 </view>
9 <!-- 头像点击选择按钮 -->
10 <view style="margin-bottom: 40rpx;">
11 <button class="btn" bind:tap="handleCommitPhoto" style="background-image: url({{icon}});">
12 </button>
13 </view>
14
15
16 <!-- 基本资料 -->
17 <view>
18 <text>基本资料</text>
19
20 <van-cell-group>
21 <van-field model:value="{{ name }}" label="昵称" placeholder="请输入爱宠昵称吧~" input-align="right" />
22
23 <view class="category-select">
24 <van-field label="类别" input-align="right" />
25 <view class="custom-checkbox">
26 <image src="{{ pet_type === '0' ? cat : cat1 }}" bindtap="onChangePetType" data-pet-type="0"/>
27 <image src="{{ pet_type === '1' ? dog : dog1 }}" bindtap="onChangePetType" data-pet-type="1"/>
28 </view>
29 </view>
30
31
32 <van-field model:value="{{ variety }}" label="品种" placeholder="请输入爱宠的品种" input-align="right" />
33
34 <view class="gender-select">
35 <van-field label="性别" input-align="right" />
36
37 <view class="custom-checkbox">
38 <image src="{{ gender === '0' ? bluefemale : greyfemale }}" bindtap="onChangeGender" data-gender="0" />
39 <image src="{{ gender === '1' ? bluemale : greymale }}" bindtap="onChangeGender" data-gender="1" />
40 </view>
41 </view>
42
43
44 <van-field model:value="{{ birthday }}" label="出生日期" placeholder="请选择出生日期" input-align="right" bindtap="showDatePickerHandler" readonly="{{true}}" />
45
46 <van-field model:value="{{ weight }}" label="体重" placeholder="请填写爱宠体重" input-align="right" />
47
48 <van-field model:value="{{ character }}" label="性格" placeholder="淘气、顽皮？还是傲娇、可爱？" input-align="right" size:large />
49 </van-cell-group>
50 </view>
51
52
53 <van-popup show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:click-overlay="onOverlay">
54 <van-datetime-picker wx:if="{{ showDatePicker }}" type="year-month" value="{{ currentDate }}" bind:confirm="onConfirm" bind:cancel="onCancel" />
55 </van-popup>
56
57 <van-button round type="info" size="large" bind:tap="handleCommit" class="bottombtn">保存并使用</van-button>
58
59 ====================================
60 js
61
62 import settings from '../../static/js/settings.js'
63 Page({
64 data: {
65 icon: '/static/images/defaultpetphoto.png',
66 icon_url: '',
67 name: '',
68 pet_type: null,
69 variety: '',
70 gender: null,
71 birthday: '',
72 weight: '',
73 character: '',
74 currentDate: new Date().getTime(),
75 showDatePicker: false,
76 show: false,
77 cat: '/static/images/bluecat.png',
78 cat1: '/static/images/greycat.png',
79 dog: '/static/images/bluedog.png',
80 dog1: '/static/images/greydog.png',
81 greymale: '/static/images/greymale.png',
82 bluemale: '/static/images/bluemale.png',
83 greyfemale: '/static/images/greyfemale.png',
84 bluefemale: '/static/images/bluefemale.png',
85 },
86
87
88 onInput(event) {
89 this.setData({
90 currentDate: event.detail,
91 });
92 },
93
94 //选择日期
95 showDatePickerHandler: function () {
96 this.setData({
97 showDatePicker: true, // 显示日期选择器
98 show: true
99 });
100 },
101 onOverlay() {
102 this.setData({
103 show: false,
104 showDatePicker: false, // 显示日期选择器
105
106 });
107 },
108
109 onConfirm: function (e) {
110 // 用户确认选择日期后的处理逻辑
111 console.log(e.detail)
112 this.setData({
113 show: false,
114 showDatePicker: false // 隐藏日期选择器
115 });
116 const timestamp = e.detail; // 这是你的时间戳
117 const date = new Date(timestamp);
118 const year = String(date.getFullYear())
119 const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要 +1，并使用 padStart 来确保总是两位数
120 this.setData({
121 birthday: year + '-' + month
122 })
123 },
124
125 onCancel: function () {
126 // 用户取消选择日期后的处理逻辑
127 this.setData({
128 showDatePicker: false, // 隐藏日期选择器
129 show: false
130 });
131 },
132
133 onChangePetType: function (e) {
134 const petType = e.currentTarget.dataset.petType;
135 // petType : 0 1
136 this.setData({
137 pet_type: petType
138 });
139 },
140
141 onChangeGender: function (e) {
142 const gender = e.currentTarget.dataset.gender;
143 this.setData({
144 gender: gender
145 });
146 console.log(this.data.gender)
147 },
148
149 handleCommit() {
150 // && this.data.icon
151 if (this.data.name && this.data.pet_type != 'null' && this.data.gender != 'null' && this.data.variety && this.data.birthday && this.data.weight && this.data.character) {
152 // 构造请求数据
153 const requestData = {
154 name: this.data.name,
155 pet_type: this.data.pet_type,
156 variety: this.data.variety,
157 gender: this.data.gender,
158 birthday: this.data.birthday,
159 weight: this.data.weight,
160 character: this.data.character
161 };
162 wx.request({
163 url: settings.bindpet,
164 method: 'POST',
165 data: requestData,
166 header: {
167 'Authorization': 'Bearer ' + wx.getStorageSync('token'),
168 'icon': this.data.icon_url || 'pet_icon/default.png',
169 },
170 success: function (res) {
171 console.log(res.data);
172 if (res.data.code == 100) {
173 wx.showToast({
174 title: '添加成功!',
175 icon: 'success',
176 duration: 2000
177 });
178 setTimeout(() => {
179 wx.redirectTo({
180 url: '/pages/animal/animal',
181 });
182 }, 2000); // 2000 毫秒 = 2 秒
183 } else {
184 wx.showToast({
185 title: '添加失败!',
186 icon: 'none',
187 });
188 setTimeout(() => {
189 wx.switchTab({
190 url: '/pages/my/my',
191 })
192 }, 2000);
193 }
194 },
195 fail: function (err) {
196 console.log(err);
197 wx.showToast({
198 title: '添加失败!',
199 icon: 'none',
200 });
201 setTimeout(() => {
202 wx.switchTab({
203 url: '/pages/my/my',
204 })
205 }, 2000);
206 }
207 });
208 } else {
209 wx.showToast({
210 title: '请填写完整信息!',
211 icon: 'none',
212 });
213 }
214 },
215 // 上传宠物照片
216 handleCommitPhoto() {
217 const that = this; // 保存当前的 this 引用
218 wx.chooseMedia({
219 count: 1,
220 mediaType: ['image'],
221 sourceType: ['album', 'camera'],
222 camera: 'back',
223 success(res) {
224 that.setData({
225 icon: res.tempFiles[0].tempFilePath
226 });
227 console.log(that.data.icon)
228 wx.uploadFile({
229 url: settings.petavatar,
230 filePath: that.data.icon,
231 name: 'avatar',
232 success(uploadRes) {
233 const data = JSON.parse(uploadRes.data);
234 console.log(data)
235 if (data.code == 100) {
236 that.setData({
237 icon: data.file_url,
238 icon_url:data.file_name
239 })
240 }
241 }
242 })
243 }
244 })
245 }
246 })
247
248 =====================================
249 wxss
250
251 /* pages/addanimal/addanimal.wxss */
252 /* 容器样式 */
253
254 .btn {
255 background-size: cover;
256 background-position: center;
257 width: 90px;
258 height: 90px;
259 background-color: #f0f0f0;
260 border-radius: 50%;
261 border: 1px solid #ccc;
262 /* 添加边框 */
263 }
264
265 .photo {
266 flex-grow: 1;
267 height: 60px;
268 object-fit: cover;
269 }
270
271 /* 基本资料部分 */
272 .van-cell-group {
273 margin-bottom: 5rpx;
274 }
275
276
277 /* 图片选择图标 */
278 image {
279 width: 70rpx;
280 height: 70rpx;
281 margin-left: 20rpx;
282 }
283
284 /* 日期选择器 */
285 van-datetime-picker {
286 margin-bottom: 20rpx;
287 }
288
289 /* 保存按钮 */
290 .bottombtn {
291 margin-top: 20rpx;
292 }
293
294 /* 类别和性别选择容器 */
295 .category-select,
296 .gender-select {
297 display: flex;
298 align-items: center;
299 }
300
301 /* 类别和性别图标容器 */
302 .category-icons,
303 .gender-icons {
304 display: flex;
305 margin-left: 10rpx;
306 }
307
308 .category-icons icon {
309 color: #333;
310 }
311
312 /* 图标样式 */
313 .icon {
314 width: 60rpx;
315 height: 60rpx;
316 margin-right: 40rpx;
317 }
318
319 /* 如果需要的话，还可以为 van-field 设置样式 */
320 .van-field {
321 flex: 1;
322 }
323
324 .custom-checkbox {
325 display: flex;
326 align-items: center;
327 }
328
329 .checkbox-icon {
330 width: 50px;
331 height: 50px;
332 margin-right: 10px;
333 }
334
335 .custom-checkbox {
336 display: flex;
337 }
338
339 .checkbox-icon {
340 width: 80rpx;
341 height: 80rpx;
342 }
343
344 .checkbox-icon.active {
345 background-color: rgb(123, 123, 235)
346 }
1 addr我的地址页面
2
3 --------------------------------------------------------------------------
4 wxml
5
6 <!--pages/addr/addr.wxml-->
7 <!-- 我的地址 -->
8
9 <view class="container">
10 <view class="address-list" wx:if="{{addresses.length > 0}}">
11 <!-- 遍历地址列表 -->
12 <block wx:for="{{addresses}}" wx:key="id">
13 <view class="address-item">
14 <!-- 地址详情展示 -->
15 <view bind:tap="handleBackAddr" data-addr="{{item}}">
16 <view class="name-mobile-container">
17 <text class="address-name">{{item.name}}</text>
18 <text class="address-mobile">{{item.mobile}}</text>
19 </view>
20 <text class="address-detail">{{item.province + ' ' + item.city + ' ' + item.detail}}</text>
21 </view>
22 <view class="actions">
23 <navigator url="/pages/editaddr/editaddr" open-type="navigate" class="edit-btn">
24 <image class="action-image" src="/static/images/edit.png" bindtap="doEditRow" data-info="{{item}}" />
25 </navigator>
26 <image class="action-image del-btn" src="/static/images/del.png" bindtap="doDeleteRow" data-id="{{item.id}}" />
27 </view>
28 </view>
29 </block>
30 </view>
31 <view class="no-address" wx:else>
32 <image class="no-address-image" src="/static/images/noaddr.png" mode="widthFix" />
33 <text class="no-address-text">暂无地址哦~</text>
34 </view>
35
36 <navigator url="/pages/addrto/addrto" open-type="navigate" class="add-address-btn">
37 <button class="btn">+添加我的地址</button>
38 </navigator>
39 </view>
40
41 ============================================
42 js
43
44 // pages/addr/addr.js
45 import settings from "../../static/js/settings";
46 const app = getApp();
47
48 Page({
49 data: {
50 addresses: [], // 用户地址列表
51 pk: null
52 },
53
54 onl oad(options) {
55 },
56
57
58 doDeleteRow: function (event) {
59 var addressId = event.currentTarget.dataset.id; // 从data-id属性中获取要删除的地址的id
60 wx.showModal({
61 title: '提示',
62 content: '确定要删除该地址吗？',
63 success: function (res) {
64 if (res.confirm) {
65 wx.request({
66 url: settings.all_addr + addressId + '/destroy_info/',
67 method: 'DELETE',
68 header: {
69 'Authorization': 'Bearer ' + wx.getStorageSync('token')
70 },
71 success: function (res) {
72 if (res.data.code == 100) {
73 // 删除成功，从地址列表中移除该地址
74 var addresses = getCurrentPages()[getCurrentPages().length - 1].data.addresses;
75 var index = addresses.findIndex(function (item) {
76 return item.id === addressId;
77 });
78 if (index !== -1) {
79 addresses.splice(index, 1);
80 getCurrentPages()[getCurrentPages().length - 1].setData({
81 addresses: addresses
82 });
83 wx.showToast({
84 title: '删除成功',
85 icon: 'success',
86 duration: 2000
87 });
88 }
89 } else {
90 wx.showToast({
91 title: '删除失败',
92 icon: 'none',
93 duration: 2000
94 });
95 }
96 },
97 fail: function () {
98 wx.showToast({
99 title: '网络错误',
100 icon: 'none',
101 });
102 }
103 });
104 } else if (res.cancel) {
105 console.log('用户点击取消删除');
106 }
107 }
108 });
109 },
110
111 // 修改
112
113 doEditRow(event) {
114 let id = event.currentTarget.dataset.info.id
115 let name = event.currentTarget.dataset.info.name
116 let mobile = event.currentTarget.dataset.info.mobile
117 let province = event.currentTarget.dataset.info.province
118 let city = event.currentTarget.dataset.info.city
119 let detail = event.currentTarget.dataset.info.detail
120 let is_default = event.currentTarget.dataset.info.is_default
121 wx.navigateTo({
122 url: '/pages/editaddr/editaddr?id=' + id + '&name=' + name + '&mobile=' + mobile
123 + '&province=' + province + '&city=' + city + '&detail=' + detail + '&is_default=' + is_default,
124 })
125 },
126 handleBackAddr(item){
127 // console.log(item.currentTarget.dataset.addr)
128 app.getAddr(item.currentTarget.dataset.addr);
129 wx.navigateBack()
130 },
131 onShow(){
132 wx.request({
133 url: settings.all_addr,
134 method: 'GET',
135 header: {
136 'Authorization': 'Bearer ' + wx.getStorageSync('token')
137 },
138 success: res => {
139 this.setData({
140 addresses: res.data.results,
141 pk: res.data.id
142 });
143 },
144 fail: err => {
145 console.error('Failed to fetch user addresses', err);
146 }
147 });
148 }
149
150 })
151
152 ==============================================
153 wxss
154
155 /* pages/addr/addr.wxss */
156
157 /* 容器样式 */
158 .container {
159 display: flex;
160 flex-direction: column;
161 padding: 16px;
162 height: 100%;
163 }
164
165
166
167 /* 地址项样式 */
168 .address-item {
169 display: flex;
170 flex-direction: column;
171 padding: 10px 0;
172 border-bottom: 1px solid #eee;
173 }
174
175 /* 地址详情样式 */
176 .address-detail {
177 font-size: 16px;
178 margin-bottom: 8px;
179 }
180
181 /* 姓名和电话的样式 */
182 .address-name {
183 font-size: 14px;
184 display: inline-block; /* 使其可以与其他元素并排显示，但不需要使用flex */
185 }
186
187 .address-mobile {
188 font-size: 14px;
189 color: #999;
190 display: inline-block; /* 使其与姓名并排显示，但不需要使用flex */
191 margin-left: 8px; /* 姓名和电话之间的间距 */
192 }
193
194 /* 姓名和电话的容器样式（如果需要） */
195 .name-mobile-container {
196 display: flex;
197 align-items: center; /* 垂直居中 */
198 margin-right: 100px; /* 为操作按钮留出空间 */
199 }
200
201
202 /* 操作按钮样式 */
203 .actions {
204 display: flex;
205 justify-content: flex-end; /* 将操作按钮放在右侧 */
206 align-items: center;
207 margin-top: 8px; /* 与姓名和电话之间的间距 */
208 }
209
210 /* 操作按钮的图片样式 */
211 .action-image {
212 width: 24px;
213 height: 24px;
214 margin-left: 8px; /* 编辑和删除图标之间的间距 */
215 }
216
217 /* 添加地址按钮的样式 */
218 .add-address-btn {
219 margin-top: 16px; /* 与地址列表之间的间距 */
220 text-align: center; /* 按钮居中对齐 */
221 }
222
223 /* .action-image {
224 width: 24px;
225 height: 24px;
226 margin-left: 8px;
227 } */
228
229 /* .edit-btn {
230 display: flex;
231 align-items: center;
232 } */
233
234
235 /* 无地址样式 */
236 .no-address {
237 display: flex;
238 flex-direction: column;
239 align-items: center;
240 text-align: center;
241 padding: 16px;
242 }
243
244 .no-address-image {
245 width: 100px;
246 height: auto;
247 margin-bottom: 8px;
248 }
249
250 .no-address-text {
251 font-size: 16px; /* 根据需要调整字体大小 */
252 color: #999;
253 text-align: center;
254 }
255
256 /* 添加地址按钮样式 */
257 .add-address-btn {
258 margin-top: 16px;
259 display: flex;
260 justify-content: center;
261 align-items: center;
262 width: 100%;
263 }
264
265 .btn {
266 margin-top: 30rpx;
267 left: 50%;
268 transform: translateX(-50%);
269 width: 700rpx;
270 background-color:#76c7fc;
271 border-radius: 50rpx 50rpx 50rpx 50rpx;
272 }
1 addto去增加地址
2
3 ---------------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/addrto/addrto.wxml-->
7 <!-- 添加地址页面 -->
8
9 <van-cell-group>
10 <van-field model:value="{{ username }}" required clearable label="联系人" icon="question-o" placeholder="请输入用户名" bind:click-icon="onClickIcon" />
11 <van-field model:value="{{ mobile }}" type="mobile" label="手机号码" placeholder="请输入手机号" required border="{{ false }}" />
12
13 <van-field label="省市" required value="{{fullAddress}}" readonly="{{true}}" is-link="{{true}}" border="{{ false }}" bind:tap="onClick" />
14
15
16 <van-field model:value="{{ detail }}" type="detail" label="详细地址" placeholder="如楼栋、门牌号、请勿填写街道小区等地址信息" required border="{{ false }}" />
17
18 <van-checkbox model:value="{{ checked }}" bind:change="onChange" label-position="left">
19 设置为默认地址
20 </van-checkbox>
21
22 </van-cell-group>
23
24 <van-popup show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:close="onClose">
25 <van-area area-list="{{ areaList }}" value="110101" bind:confirm="onConfirm" bind:cancel="OnCancel" />
26 </van-popup>
27
28
29 <van-button round type="info" size="large" bind:tap="handleCommit" class="bottombtn">保存并使用</van-button>
30
31 ===============================================
32 js
33
34 // pages/addrto/addrto.js
35 import { areaList } from '@vant/area-data';
36 import settings from '../../static/js/settings.js'
37 const options = [];
38
39 Page({
40 data: {
41 show: false,
42 options,
43 fieldValue: '',
44 cascaderValue: '',
45 areaList,
46 checked: false,
47 sheng:'',
48 shi:'',
49 qu:'',
50 fullAddress: '' ,// 用于存储组合后的地址
51 fieldValue:null,
52 username:'',
53 mobile:'',
54 detail:''
55 },
56
57 onChange(event) {
58 this.setData({
59 checked: event.detail,
60 });
61 },
62
63 onClick() {
64 this.setData({
65 show: true,
66 });
67 },
68
69 OnCancel() {
70 this.setData({
71 show: false,
72 });
73 },
74
75 onl oad(options) {
76 },
77
78 onConfirm(event){
79 let sheng = event.detail.values[0].name
80 let shi = event.detail.values[1].name
81 let qu = event.detail.values[2].name
82 let fullAddress=sheng + ' ' + shi + ' ' + qu
83 this.setData({
84 show:false,
85 sheng:sheng,
86 shi:shi,
87 qu:qu,
88 fullAddress:fullAddress
89 })
90
91 },
92 handleCommit() {
93 console.log(this.data.sheng,this.data.shi,this.data.qu,this.data.detail,this.data.username,this.data.mobile)
94 if (this.data.sheng && this.data.shi && this.data.qu && this.data.detail && this.data.username && this.data.mobile) {
95 wx.request({
96 url: settings.addr,
97 method: 'POST',
98 data: {
99 name: this.data.username,
100 mobile: this.data.mobile,
101 detail: this.data.detail,
102 province:this.data.sheng,
103 city:this.data.shi + this.data.qu,
104 is_default:this.data.checked
105 },
106 header:{
107 'Authorization':'Bearer ' + wx.getStorageSync('token')
108 },
109 success:(res)=>{
110 if (res.data.code==100){
111 //关闭弹出框
112 this.setData({
113 show:false
114 });
115 setTimeout(()=>{
116 wx.navigateBack({
117 delta:1
118 })
119 });
120 wx.showToast({
121 title: '保存成功',
122 icon:'success',
123 });
124 }else{
125 wx.showToast({
126 title: '保存失败',
127 icon:'none'
128 })
129 }
130
131 },
132 fail: function(error) {
133 console.error("请求失败: ", error);
134 }
135 });
136 } else {
137 // 处理缺少必要字段的情况
138 wx.showToast({
139 title: '请填写所有必填项',
140 });
141 }
142 }
143
144
145
146 })
147
148
149 =================================================
150 wxss
151
152 /* pages/addrto/addrto.wxss */
153
154 .bottombtn {
155 position: fixed;
156 /* 固定定位 */
157 bottom: 30px;
158 /* 距离底部20像素 */
159 left: 50%;
160 /* 水平居中 */
161 transform: translateX(-50%);
162 /* 使按钮水平居中 */
163 width: 700rpx;
164 }
1 anmail宠物页面
2
3 -----------------------------------------------------------------------------------
4 wxml
5
6 <view class="card">
7 <view class="card-header" wx:for="{{petlist}}" wx:key="id" bind:tap="handleBackPet" data-pet="{{item}}">
8 <image class="avatar" src="{{item.icon}}" alt="头像"></image>
9 <view class="info">
10 <view class="name">{{item.name}}</view>
11 <view class="tag-gender">
12 <text class="tag">{{item.pet_type}}</text>
13 <view wx:if="{{item.gender === '弟弟'}}">
14 <image class="avatar" src="/static/images/bluemale.png" alt="头像" style="height: 40rpx;width: 40rpx;"></image>
15 </view>
16 <view wx:else>
17 <image class="avatar" src="/static/images/bluefemale.png" alt="头像" style="height: 40rpx;width: 40rpx;"></image>
18 </view>
19 </view>
20 <view class="details">
21 <text class="detail">{{item.variety}}</text>
22 <view>
23 <text class="detail">生日月 {{item.birthday}} | 体重 {{item.weight}}kg</text>
24 </view>
25 <view>
26 <text class="detail">性格：{{item.character}}</text>
27 </view>
28 <view class="card-footer">
29 <button class="edit-btn">编辑</button>
30 <button class="delete-btn">删除</button>
31 </view>
32 <van-divider wx:if="{{index !== petlist.length - 1}}" />
33 </view>
34 </view>
35 </view>
36 </view>
37
38 <view class="bottombtn">
39 <van-button round type="info" custom-style="width:530rpx;" bind:tap="handleAddPet"> + 添加宠物</van-button>
40 </view>
41
42 =================================================
43 js
44 // pages/animal/animal.js
45 import settings from '../../static/js/settings.js'
46 const app = getApp();
47 Page({
48 data: {
49 petlist: []
50 },
51 onShow(options) {
52 wx.request({
53 url: settings.userpet,
54 method: 'GET',
55 header: {
56 'Authorization': 'Bearer ' + wx.getStorageSync('token')
57 },
58 success: (res) => {
59 this.setData({
60 petlist: res.data.results
61 })
62 }
63 })
64 },
65 handleAddPet(){
66 wx.redirectTo({
67 url: '/pages/addanimal/addanimal',
68 })
69 },
70 handleBackPet(event){
71 app.getPet(event.currentTarget.dataset.pet)
72 wx.navigateBack()
73 }
74 })
75
76 ===============================================
77 wxss
78
79 .card {
80 background-color: #f8fbff;
81 border-radius: 10px;
82 padding: 15px;
83 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
84 margin: 10px 0;
85 }
86
87 .card-header {
88 display: flex;
89 align-items: center;
90 margin-bottom: 10px;
91 }
92
93 .avatar {
94 width: 50px;
95 height: 50px;
96 border-radius: 50%;
97 margin-right: 10px;
98 }
99
100 .info {
101 flex: 1;
102 }
103
104 .name {
105 font-size: 20px;
106 font-weight: bold;
107 }
108
109 .tag-gender {
110 display: flex;
111 align-items: center;
112 }
113
114 .tag {
115 background-color: #1e90ff;
116 color: white;
117 padding: 2px 5px;
118 border-radius: 5px;
119 margin-right: 5px;
120 font-size: 12px;
121 }
122
123 .gender-icon {
124 color: #1e90ff;
125 font-size: 16px;
126 }
127
128 .details {
129 font-size: 14px;
130 color: #666;
131 }
132
133 .detail {
134 margin-right: 10px;
135 }
136
137 .card-body {
138 margin-bottom: 10px;
139 }
140
141 .character {
142 background-color: #f0f8ff;
143 border-radius: 5px;
144 padding: 10px;
145 color: #333;
146 }
147
148 .card-footer {
149 display: flex;
150 justify-content: flex-end;
151 }
152
153 .edit-btn,
154 .delete-btn {
155 border: none;
156 background: none;
157 color: #1e90ff;
158 cursor: pointer;
159 font-size: 14px;
160 margin-left: 10px;
161 }
162
163 .delete-btn {
164 color: #ff4d4f;
165 }
166
167 .bottombtn {
168 display: flex;
169 justify-content: center;
170 align-content: center;
171 margin-bottom: 30rpx;
172 }
1 collect查看喂养员
2
3
4 ----------------------------------------------------------------------------
5 wxml
6
7 <!--pages/collect/collect.wxml-->
8 <van-empty description="暂无收藏的喂养员哦">
9 <van-button round type="info" class="bottom-button">查看周边喂养员</van-button>
10 </van-empty>
11
12
13 ===============================================
14 wxss
15
16 /* pages/collect/collect.wxss */
17
18 .bottom-button {
19 width: 160px;
20 height: 40px;
21 }
1 editaddr编辑用户地址
2
3 -----------------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/addrto/addrto.wxml-->
7 <!-- 修改地址页面 -->
8
9 <van-cell-group>
10 <van-field model:value="{{ username }}" required clearable label="联系人" icon="question-o" placeholder="请输入用户名" bind:click-icon="onClickIcon" />
11 <van-field model:value="{{ mobile }}" type="mobile" label="手机号码" placeholder="请输入手机号" required border="{{ false }}" />
12
13 <van-field label="省市" required model:value="{{fullAddress}}" readonly="{{true}}" is-link="{{true}}" border="{{ false }}" bind:tap="onClick" />
14
15
16 <van-field model:value="{{ detail }}" type="detail" label="详细地址" placeholder="如楼栋、门牌号、请勿填写街道小区等地址信息" required border="{{ false }}" />
17
18 <van-checkbox model:value="{{ checked }}" bind:change="onChange" label-position="left">
19 设置为默认地址
20 </van-checkbox>
21
22 </van-cell-group>
23
24 <van-popup show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:close="onClose">
25 <van-area area-list="{{ areaList }}" value="110101" bind:confirm="onConfirm" bind:cancel="OnCancel" />
26 </van-popup>
27
28
29 <van-button round type="info" size="large" bind:tap="handleCommit" custom-style="margin-top: 30rpx;">保存并使用</van-button>
30
31 <van-toast id="van-toast" />
32
33 ===============================================
34 js
35
36 // pages/editaddr/editaddr.js
37 import settings from '../../static/js/settings.js'
38 import Toast from '@vant/weapp/toast/toast';
39 import {
40 areaList
41 } from '@vant/area-data';
42 Page({
43 data: {
44 id: '',
45 username: '',
46 mobile: '',
47 detail: '',
48 checked: '',
49 show: false,
50 areaList,
51 fullAddress: '',
52 sheng: '',
53 shi: '',
54 qu: ''
55
56
57 },
58 onl oad(options) {
59 console.log(options)
60 this.setData({
61 id: options.id,
62 username: options.name,
63 mobile: options.mobile,
64 detail: options.detail,
65 checked: options.is_default,
66 sheng: options.province,
67 shiqu: options.city,
68 fullAddress: options.province + ' ' + options.city
69 })
70 },
71
72 onChange(event) {
73 this.setData({
74 checked: event.detail,
75 });
76 },
77
78 onClick() {
79 this.setData({
80 show: true,
81 });
82 },
83
84 OnCancel() {
85 this.setData({
86 show: false,
87 });
88 },
89
90 onClose() {
91 this.setData({
92 show: false,
93 });
94 },
95
96 onConfirm(event) {
97 let sheng = event.detail.values[0].name
98 let shi = event.detail.values[1].name
99 let qu = event.detail.values[2].name
100 let fullAddress = sheng + ' ' + shi + qu
101 console.log(event.detail.values) // {id: "28", name: "123", mobile: "123", province: "北京市", city: "北京市东城区", …}
102 this.setData({
103 show: false,
104 sheng: sheng,
105 shi: shi,
106 qu: qu,
107 fullAddress: fullAddress
108 })
109
110 },
111
112 handleCommit() {
113 let id = this.data.id
114 let username = this.data.username
115 let mobile = this.data.mobile
116 let detail = this.data.detail
117 let sheng = this.data.sheng
118 let shiqu = this.data.shiqu
119 let checked = this.data.checked
120
121 wx.request({
122 url: settings.editaddr + id + '/',
123 method: 'PUT',
124 data: {
125 id: id,
126 name: username,
127 mobile: mobile,
128 province: sheng,
129 city: shiqu,
130 detail: detail,
131 is_default: checked
132 },
133 header: {
134 'Authorization': 'Bearer ' + wx.getStorageSync('token')
135 },
136 success: (res) => {
137 if (res.data.code == 100) {
138 Toast.success('修改成功!');
139 setTimeout(() => {
140 wx.reLaunch({
141 url: '/pages/addr/addr',
142 })
143 }, 2000);
144 } else {
145 Toast.fail(res.data.msg);
146 }
147 }
148 })
149 }
150
151 })
152
153 ================================================
154 wxss
155
156 /* pages/editaddr/editaddr.wxss */
157 .bottombtn{
158 margin-top: 20rpx;
159 }
home页面
----------------------------------------------------------------------------------------
wxml
<!--pages/home/home.wxml-->
<swiper autoplay interval="3000" indicator-color="#00FF00" indicator-active-color="#70DB93" circular class="swiper-middle">
<swiper-item wx:for="{{topBannerList}}" wx:key="id">
<image src="{{item.image}}" mode="widthFix" class='image' />
</swiper-item>
</swiper>
<van-toast id="van-toast" />
<!-- 跳转页面 -->
<view class="images">
<navigator url="/pages/serve/serve?type=cat" open-type="switchTab" bindtap="switchTabToServe">
<image class="image1" src="/static/images/cat1.png" mode="aspectFit" />
</navigator>
<navigator url="/pages/serve/serve?type=dog" open-type="switchTab" bindtap="switchTabToServe">
<image class="image1" src="/static/images/dog1.png" mode="aspectFit" />
</navigator>
</view>
<!-- 第二个跳转页面 -->
<view class="feed-container">
<view class="feed-item">
<navigator url="/pages/serve/serve" open-type="switchTab" bindtap="switchTabToServe">
<image class="feed-image" src="/static/images/cat2.png" />
</navigator>
<view class="tupianzi">
猫咪喂养
</view>
</view>
<view class="feed-item">
<navigator url="/pages/serve/serve" open-type="switchTab" bindtap="switchTabToServe">
<image class="feed-image" src="/static/images/dog2.png" />
</navigator>
<view class="tupianzi">
狗狗喂养
</view>
</view>
<view class="feed-item">
<navigator url="/pages/my/my" open-type="switchTab" bindtap="switchTabToMy">
<image class="feed-image" src="/static/images/coupon.png" />
</navigator>
<view class="tupianzi">
优惠券
</view>
</view>
<view class="feed-item">
<navigator url="/pages/my/my" open-type="switchTab" bindtap="switchTabToMy">
<image class="feed-image" src="/static/images/suggest.png" />
</navigator>
<view class="tupianzi">
建议反馈
</view>
</view>
</view>
<!-- 中间的轮播图 -->
<swiper autoplay interval="3000" indicator-color="#00FF00" indicator-active-color="#70DB93" circular class="swiper-middle2">
<swiper-item wx:for="{{middleBannerList}}" wx:key="id">
<image src="{{item.image}}" mode="widthFix" class='image2' />
</swiper-item>
</swiper>
<!-- 加入喂养 -->
<view class="card">
<navigator url="/pages/pet/regfeeder/regfeeder" open-type="navigate">
<image class="card-image" src="/static/images/join.png" />
</navigator>
<view class="card-button">
<text>加入宠物王国喂养员</text>
<text class="card-subtext">申请成为宠物王国喂养员/宠物王国推广员</text>
</view>
</view>
<!-- 喂养数量 -->
<view class="container">
<view class="item" wx:for="{{items}}" wx:key="index">
<image class="icon" src="{{item.imgUrl}}" mode="widthFix"></image>
<view class="info">
<view class="number">{{item.number}}</view>
<view class="date">{{item.date}}</view>
</view>
</view>
</view>
============================================
js
// pages/home/home.js
import settings from '../../static/js/settings.js';
import Toast from '@vant/weapp/toast/toast';
Page({
data: {
topBannerList:{},
middleBannerList:{},
items: [
{
imgUrl: '/static/images/catnumber.png',
number: '39866只',
date: '至2024.05.28'
},
{
imgUrl: '/static/images/dognumber.png',
number: '24491只',
date: '至2024.05.28'
},
{
imgUrl: '/static/images/good.png',
number: '58686个',
date: '至2024.05.15'
}
]
},
onl oad(options) {
},
switchTabToServe:function(){
wx.redirectTo({
url: '/pages/serve/serve'
});
},
switchTabToMy:function(){
wx.redirectTo({
url: '/pages/my/my',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
wx.request({
url: settings.banner,
method: 'GET',
success: res => {
if (res.data.code == 100){
// console.log(res.data)
if (Array.isArray(res.data.results) && res.data.results.length === 9) {
// 分割数组，前3个为顶部轮播图，后4个为中间轮播图
const topBanners = res.data.results.slice(0, 3);
const middleBanners = res.data.results.slice(6, 9);
// 更新页面的数据
this.setData({
topBannerList: topBanners,
middleBannerList: middleBanners
});
}else{
Toast.fail('服务器异常!');
}
}else{
Toast.fail('服务器异常!');
}
},
fail: err => {
Toast.fail('服务器异常!');
},
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
===============================================
wxss
/* pages/home/home.wxss */
.image{
width: 750rpx;
}
.images {
display: flex;
justify-content: space-evenly;
align-items: center;
margin-top: 20rpx;
}
/* image1 用于图像本身 */
.image1 {
width: 340rpx;
height: 250rpx;
margin-bottom: 10rpx;
}
.feed-container {
display: flex;
justify-content: space-around;
padding: 10px;
}
.feed-item {
flex: 1;
text-align: center;
margin: 10px;
}
.feed-image {
width: 100rpx;
height: 100rpx;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.swiper-middle2{
height: 320rpx;
width: 750rpx;
}
.image2{
height: 400rpx;
background-size: cover;
width: 750rpx;
}
.card {
display: flex;
align-items: center;
padding: 10rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
}
.card-image {
width: 100rpx;
height: 100rpx;
margin-right: 30rpx;
}
.card-button {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 5rpx 0;
}
.card-subtext {
margin-top: 10rpx;
font-size: 30rpx;
color:black;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
width: calc(33.33% - 20rpx); /* 三列布局，减去间隔 */
box-sizing: border-box;
}
.item:last-child {
margin-bottom: 0;
}
.icon {
width: 100rpx;
height: auto;
margin-bottom: 20rpx;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: center;
}
.number {
font-size: 20rpx;
font-weight: bold;
margin-bottom: 5rpx;
}
.date {
font-size: 20rpx;
font-weight: bold;
color:black;
}
.tupianzi{
color: gray;
font-size: 25rpx;
}
1 inform消息页面
2
3 ----------------------------------------------------------------------------------------
4 wxml
5
6 <!-- 订阅页面 -->
7 <!-- 图片跳转 -->
8 <navigator url="/pages/subscription/subscription" open-type="navigate" class="navigator-container">
9 <image class="card-image" src="/static/images/subscription.png" />
10 </navigator>
11 <!-- 1 -->
12 <van-cell-group class="cell-group-1">
13 <view class="cell-with-button1">
14 <van-cell title="常用消息" />
15 <van-button round type="info"size="small">一键订阅</van-button>
16 </view>
17
18 <view class="cell-with-button1">
19 <van-cell title="未读消息通知" label="有喂养员联系您时通知" />
20 <van-button round type="info" size="mini">订阅</van-button>
21 </view>
22 <view class="cell-with-button1">
23 <van-cell title="接单成功通知" label="有喂养员接单时通知" />
24 <van-button round type="info" size="mini">订阅</van-button>
25 </view>
26 <view class="cell-with-button1">
27 <van-cell title="服务进度通知" label="喂养员上门服务进度通知" />
28 <van-button round type="info"size="mini">订阅</van-button>
29 </view>
30 </van-cell-group>
31
32 <!-- 2 -->
33 <van-cell-group class="cell-group-2">
34 <view class="cell-with-button2">
35 <van-cell title="其他消息" />
36 <van-button round type="info"size="small">一键订阅</van-button>
37 </view>
38 <view class="cell-with-button2">
39 <van-cell title="订单取消通知"/>
40 <van-button round type="info" size="mini">订阅</van-button>
41 </view>
42 <view class="cell-with-button2">
43 <van-cell title="接单成功通知" label="订单可以评价通知" />
44 <van-button round type="info" size="mini">订阅</van-button>
45 </view>
46 </van-cell-group>
47
48
49 <button class="subscribe-btn" bindtap="subscribe" wx:if="{{showSubscribeBtn}}">打开小程序设置页</button>
50
51
52 ==============================================
53 js
54
55 Page({
56 data: {
57 showSubscribeBtn: true,
58 },
59
60 switchTab: function(e) {
61 this.setData({
62 currentTab: e.currentTarget.dataset.tab
63 });
64 },
65
66 subscribe: function() {
67
68 },
69
70 onl oad: function() {
71 }
72 });
73
74 ================================================
75 wxss
76
77 .card-image{
78 width: 750rpx;
79 height: 200rpx;
80 }
81
82 .cell-with-button1 {
83 display: flex;
84 align-items: center;
85 margin-bottom: 16rpx;
86 }
87
88 .cell-with-button1 .van-cell {
89 flex: 1;
90 }
91
92 .cell-with-button1 .van-button {
93 margin-left: 300rpx;
94 }
95
96
97
98 .cell-with-button2 {
99 display: flex;
100 align-items: center;
101 margin-bottom: 16rpx;
102 }
103
104 .cell-with-button2 .van-cell {
105 flex: 1;
106 }
107
108 .cell-with-button2 .van-button {
109 margin-left: 340rpx;
110 }
111
112 .subscribe-btn{
113 bottom: 10px;
114 width: 700rpx;
115 background-color:#76c7fc;
116 border-radius: 50rpx 50rpx 50rpx 50rpx;
117 }
1 login登录页面
2
3 --------------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/login/login.wxml-->
7 <view class="container">
8 <view class="main">
9 <view class="icon-view">
10 <!-- 应用图标 -->
11 <image src="/static/images/catdog.png" class="app-icon"></image>
12 <text class="title" style="text-align: center;">动物王国</text>
13 <text class="title">ta只是你的一条宠物，但你却是ta的一生</text>
14 </view>
15 </view>
16 <van-field model:value="{{username}}" label="手机号/用户名/邮箱" type="tel" placeholder="请输入手机号/用户名/邮箱" clearable="{{ true }}" />
17
18 <van-toast id="van-toast" />
19 <van-field model:value="{{password}}" center clearable label="密码" placeholder="请输入密码" use-button-slot type='password'>
20 </van-field>
21 <van-button type="info" block="{{ true }}" bind:tap="handleMulLogin" custom-style="margin-top:30rpx">登录</van-button>
22 </view>
23
24 <van-toast id="van-toast" />
25
26 -==============================================
27 js
28
29 // pages/login/login.js
30 import settings from '../../static/js/settings.js'
31 import Toast from '@vant/weapp/toast/toast';
32 var app = getApp(); // 拿到的是 app.js中data的数据
33 Page({
34 data: {
35 username: '',
36 password: '',
37 },
38
39 handleMulLogin: function() {
40 wx.request({
41 url: settings.mul_login,
42 method: 'post',
43 data:{
44 username:this.data.username,
45 password:this.data.password
46 },
47 success:(res)=>{
48 console.log(res.data)
49 if (res.data.code==100){
50 Toast.success('登录成功!');
51 var icon_path = res.data.icon.replace('//media/', '/')
52 var token = res.data.token
53 var username = res.data.username
54 var icon = icon_path
55 // console.log(icon_path)
56 app.initUserInfo(username,icon,token)
57 setTimeout(() => {
58 wx.switchTab({
59 url: '/pages/my/my',
60 })
61 }, 2000);
62 }else{
63 Toast.fail('用户名或密码错误!');
64 }
65 }
66 })
67 },
68 })
69
70 =============================================
71 wxss
72
73 .container {
74 padding: 20rpx;
75
76 }
77 .main{
78 display: flex;
79 justify-content: center;
80 align-items: center;
81 }
82 .icon-view{
83 display: flex;
84 flex-direction: column;
85 margin-bottom: 50rpx;
86 }
87 .title {
88 font-size: 28rpx;
89 font-weight: bold;
90 color: #333333;
91 }
92 .app-icon {
93 width: 100rpx;
94 height: 100rpx;
95 margin: 40rpx auto 20rpx; /* 上边距为40rpx，下边距为20rpx，左右居中 */
96 }
1 loginpage新增登录页面
2
3 -----------------------------------------------------------------------------------------
4 wxml
5
6 <block wx:if="{{userInfo==null}}">
7 <view class="container1">
8 <view class="main">
9 <view class="icon-view">
10 <!-- 应用图标 -->
11 <image src="/static/images/catdog.png" class="app-icon"></image>
12 <text class="title">动物王国</text>
13 </view>
14 </view>
15 <van-cell-group>
16 <van-cell>
17 <button type="warn">手机号快捷登录</button>
18 </van-cell>
19 </van-cell-group>
20
21 <!-- 其他手机号登录 -->
22 <van-cell-group>
23 <van-cell>
24 <button type="primary" plain bind:tap="handleToOtherLogin">其他登录方式</button>
25 </van-cell>
26 </van-cell-group>
27
28 <!-- 用户协议同意 -->
29 <view class="agreement-container">
30 <van-checkbox class="checkbox" value="{{ checked }}" shape="square" bind:change="onChange">
31 </van-checkbox>
32 <text class="agreement-text">我已阅读并同意</text>
33 <navigator url="" class="agreement-link">《用户协议》</navigator>
34 </view>
35 </view>
36 </block>
37
38
39 <block wx:else>
40 <view class="container">
41 <view class="top-view">
42 <view class="user">
43 <view class="row">
44 <image class="avatar" src="{{userInfo.avatar}}"></image>
45 <view class="name">
46 <view bindtap="logout">{{userInfo.name}}</view>
47 </view>
48 </view>
49 </view>
50 </view>
51 </view>
52 </block>
53 <van-toast id="van-toast" />
54 <view class="bottomtext">
55 <navigator url="/pages/home/home" open-type="switchTab">
56 <text class="loginpagebdl">暂不登录</text>
57 </navigator>
58 <text class="loginpagebdl1" bind:tap="handleToReg">去注册</text>
59 </view>
60
61 ================================================
62 js
63
64 // pages/loginpage/loginpage.js
65 import Toast from '@vant/weapp/toast/toast';
66 Page({
67 data: {
68 checked: false,
69 },
70 onl oad(options) {
71
72 },
73 handleToOtherLogin(){
74 if(!this.data.checked){
75 Toast.fail('请勾选协议');
76 }else{
77 wx.navigateTo({
78 url: '/pages/login/login',
79 })
80 }
81 },
82 onChange(event) {
83 this.setData({
84 checked: event.detail,
85 });
86 },
87 handleToReg(){
88 if(!this.data.checked){
89 Toast.fail('请勾选协议');
90 }else{
91 wx.navigateTo({
92 url: '/pages/user/register/register',
93 })
94 }
95 }
96 })
97
98 ===============================================
99 wxss
100
101 page {
102 height: 100%;
103 }
104
105 .login-area {
106 height: 100%;
107 display: flex;
108 flex-direction: column;
109 justify-content: center;
110 align-items: center;
111 }
112
113 .login-area .btn {
114 width: 200rpx;
115 height: 200rpx;
116 border-radius: 500%;
117 background-color: #5cb85c;
118 color: white;
119
120 display: flex;
121 flex-direction: row;
122 align-items: center;
123 justify-content: center;
124 }
125
126 .user-area {
127 height: 100%;
128 display: flex;
129 flex-direction: column;
130 justify-content: center;
131 align-items: center;
132 }
133
134 .user-area image {
135 width: 200rpx;
136 height: 200rpx;
137 border-radius: 500%;
138 }
139
140 .user-area .name {
141 font-size: 30rpx;
142 padding: 30rpx 0;
143 }
144
145 .user-area .logout {
146 color: #a94442;
147 }
148
149 .top-view {
150 background-color: #01ccb6;
151
152 color: white;
153 padding: 40rpx;
154 }
155
156 .top-view .user {
157 display: flex;
158 flex-direction: row;
159 justify-content: space-between;
160 align-items: center;
161 }
162
163 .top-view .user .row {
164 display: flex;
165 flex-direction: row;
166 justify-content: flex-start;
167 align-items: center;
168 }
169
170 .top-view .user .avatar {
171 width: 100rpx;
172 height: 100rpx;
173 border-radius: 50%;
174 }
175
176 .top-view .user .name {
177 display: flex;
178 flex-direction: row;
179 justify-content: flex-start;
180 padding-left: 20rpx;
181 }
182
183 .top-view .user .name navigator {
184 padding: 0 5rpx;
185 }
186
187 .top-view .site {
188 background-color: rgba(0, 0, 0, 0.16);
189 padding: 20rpx;
190 border-top-left-radius: 32rpx;
191 border-bottom-left-radius: 32rpx;
192 }
193
194 .top-view .numbers {
195 display: flex;
196 flex-direction: row;
197 justify-content: space-between;
198 font-size: 28rpx;
199 padding: 40rpx;
200 padding-bottom: 0rpx;
201 }
202
203 .top-view .numbers .row {
204 display: flex;
205 flex-direction: column;
206 align-items: center;
207 }
208
209
210 /* login.wxss */
211 .container1 {
212 padding: 20rpx;
213 }
214
215 .main {
216 display: flex;
217 justify-content: center;
218 align-items: center;
219 }
220
221 .icon-view {
222 display: flex;
223 flex-direction: column;
224 margin-bottom: 50rpx;
225 }
226
227 .app-icon {
228 width: 100rpx;
229 height: 100rpx;
230 margin: 40rpx auto 20rpx;
231 /* 上边距为40rpx，下边距为20rpx，左右居中 */
232 }
233
234 .quick-login-header {
235 display: flex;
236 align-items: center;
237 }
238
239 .icon {
240 width: 40rpx;
241 height: 40rpx;
242 margin-right: 20rpx;
243 }
244
245 .title {
246 font-size: 28rpx;
247 font-weight: bold;
248 color: #333333;
249 }
250
251 .divider {
252 height: 20rpx;
253 }
254
255 .login-option {
256 font-size: 28rpx;
257 color: #333333;
258 }
259
260 .login-option .van-cell__icon {
261 color: #07c160;
262 }
263
264 .agreement-container {
265 display: flex;
266 align-items: center;
267 margin-top: 20rpx;
268 }
269
270 .checkbox {
271 margin-right: 10rpx;
272 }
273
274 .agreement-text {
275 font-size: 24rpx;
276 color: #666666;
277 }
278
279 .agreement-link {
280 font-size: 24rpx;
281 color: #07c160;
282 }
283
284 .loginpagebdl {
285 position: fixed;
286 /* 固定定位 */
287 bottom: 300rpx;
288 /* 距离底部20像素 */
289 left: 30%;
290 /* 水平居中 */
291 transform: translateX(-30%);
292 /* 使按钮水平居中 */
293 color: #01ccb6;
294 }
295 .loginpagebdl1 {
296 position: fixed;
297 bottom: 300rpx;
298 left: 70%;
299 transform: translateX(-70%);
300 color: #01ccb6;
301 }
1 msg消息页修改
2
3 -------------------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/msg/msg.wxml-->
7 <view wx:if="{{ !hasToken }}">
8 <van-empty description="暂无消息哦" >
9 <van-button round type="danger" class="bottom-button" bind:tap="handleToLogin">去登录</van-button>
10 </van-empty>
11 </view>
12
13 <view wx:if="{{ username && data.length === 0 }}">
14 <van-empty description="暂无消息哦" >
15 </van-empty>
16 </view>
17
18
19 <view wx:for="{{data}}" wx:key="id" class="msglistitem">
20 <view class="msglistcontent" bind:tap="handleGetFedderId" data-mark="{{item.sender.feeder.id}}" data-name = "{{item.sender.feeder.name}}" wx:if="{{item.receiver.username === username}}">
21 <image src="{{item.sender.feeder.icon}}" alt="" class="msglistimg" />
22 <view class="msglistusername">{{item.sender.feeder.name}}</view>
23 <view class="msglistshortmsg">{{item.content}}</view>
24 <view class="msglisttime">{{item.send_time}}</view>
25 <van-divider />
26 </view>
27 <view class="msglistcontent" bind:tap="handleGetFedderId" data-mark="{{item.receiver.feeder.id}}" data-name = "{{item.receiver.feeder.name}}" wx:else>
28 <image src="{{item.receiver.feeder.icon}}" alt="" class="msglistimg" />
29 <view class="msglistusername">{{item.receiver.feeder.name}}</view>
30 <view class="msglistshortmsg">{{item.content}}</view>
31 <view class="msglisttime">{{item.send_time}}</view>
32 <van-divider />
33 </view>
34 </view>
35
36
37 <van-overlay show="{{ show }}">
38 <view class="wrapper">
39 <van-loading size="24px" vertical>加载中...</van-loading>
40 </view>
41 </van-overlay>
42
43 =================================================
44 js
45
46 import settings from '../../static/js/settings.js'
47 const app = getApp()
48 // pages/msg/msg.js
49 Page({
50 data: {
51 hasToken: false, // 布尔变量来控制模板中的渲染
52 messages: [],
53 t: '',
54 feederid: '',
55 send_id: '',
56 data: [],
57 username: '',
58 show: false,
59 type: '0',
60 feeder_name:''
61 },
62
63
64 tooo() {
65 wx.request({
66 url: settings.usermsglist,
67 method: 'GET',
68 header: {
69 'Authorization': 'Bearer ' + app.globalData.token
70 },
71 success: (res) => {
72 let msg_list = [];
73 let seen = new Set();
74 if (res.data.code == 100) {
75 this.setData({
76 messages: res.data.results,
77 type: '1'
78 })
79 // console.log(this.data.messages)
80 res.data.results.reverse().forEach(element => {
81 let name = element.receiver.username;
82 let name1 = element.sender.username;
83 msg_list.push(name);
84 msg_list.push(name1);
85 const count = msg_list.filter(item => item === name).length;
86 const count1 = msg_list.filter(item => item === name1).length;
87 if (count == 1 || count1 == 1) {
88 seen.add(element);
89 }
90 });
91 this.setData({
92 data: seen,
93 hasData: false,
94 })
95 const msgArray = Array.from(this.data.data);
96 this.setData({
97 data: msgArray
98 })
99 // console.log(this.data.data)
100 }
101 }
102 })
103 },
104 onl oad(options) {
105 this.setData({
106 show: true
107 })
108 this.check_type();
109 },
110 onUnload() {
111 // 页面卸载时清除定时器
112 clearInterval(this.timer);
113 },
114 onHide() {
115 // 页面隐藏时清除定时器
116 clearInterval(this.timer);
117 },
118 handleToLogin() {
119 wx.navigateTo({
120 url: '/pages/loginpage/loginpage',
121 })
122 },
123 check_type() {
124 if (this.data.type === '1') {
125 this.setData({
126 show: false
127 })
128 }
129 },
130 onShow() {
131 const token = wx.getStorageSync('token');
132 this.setData({
133 hasToken: !!token, // 设置 hasToken 的值
134 username:wx.getStorageSync('username')
135 });
136
137 if (token) {
138 // 设置定时器，每2秒执行一次查询
139 this.timer = setInterval(() => {
140 this.tooo();
141 this.check_type();
142 }, 2000);
143 }else{
144 this.setData({
145 show: false // 设置 hasToken 的值
146 });
147 }
148 },
149
150 handleToChat() {
151 const token = wx.getStorageSync('token')
152 const username = wx.getStorageSync('username')
153 if (token) {
154 wx.navigateTo({
155 url: '/pages/pet/chat/chat?send_name=' + username + '&' + 'recv_id=' + this.data.feederid + '&' + 'feeder_name=' + this.data.feeder_name
156 })
157 } else {
158 Toast({
159 type: 'fail',
160 message: '请先登录!',
161 onClose: () => {
162 wx.switchTab({
163 url: '/pages/my/my',
164 })
165 },
166 });
167 }
168 },
169 handleGetFedderId(event) {
170 this.setData({
171 feederid: event.currentTarget.dataset.mark,
172 feeder_name : event.currentTarget.dataset.name
173 });
174 this.handleToChat();
175 // console.log(event)
176 },
177 onPullDownRefresh() {
178 this.tooo();
179 },
180 })
181
182 ===============================================
183 wxss
184
185 .bottom-button {
186 /* position: fixed; */
187 /* 固定定位 */
188 bottom:680rpx;
189 /* 距离底部20像素 */
190 left: 50%;
191 /* 水平居中 */
192 transform: translateX(-50%);
193 /* 使按钮水平居中 */
194 /* width: 200rpx;
195 height: 40rpx; */
196 }
197
198 /* styles.wxss */
199 .msglistitem {
200 display: flex;
201 flex-direction: column;
202 align-items: center;
203 margin: 10rpx 0;
204 }
205
206 .msglistcontent {
207 display: flex;
208 align-items: center;
209 flex-wrap: wrap;
210 width: 100%;
211 /* padding: 10rpx; */
212 }
213
214 .msglistimg {
215 width: 120rpx;
216 height: 120rpx;
217 border-radius: 50%;
218 }
219
220 .msglistusername {
221 width: 500rpx;
222 margin-left: 20rpx;
223 margin-top: -60rpx;
224 font-size: 32rpx;
225 /* 适当调整字体大小 */
226 }
227
228 .msglistshortmsg {
229 width: 500rpx;
230 margin-left: 140rpx;
231 margin-top: -80rpx;
232 font-size: 25rpx;
233 color: grey;
234 }
235
236 .msglisttime {
237 width: 500rpx;
238 margin-left: 500rpx;
239 font-size: 25rpx;
240 margin-top: -190rpx;
241 color: grey;
242 }
243
244 .wrapper {
245 display: flex;
246 align-items: center;
247 justify-content: center;
248 height: 100%;
249 }
250
251 .block {
252 width: 120px;
253 height: 120px;
254 background-color: #fff;
255 }
==============================================
json
{
"usingComponents": {},
"navigationBarTitleText":"消息中心",
"onReachBottomDistance": 50,
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"
}
1 my我的页面
2
3 ---------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/my/my.wxml-->
7 <view class="container">
8
9 <!-- 头像点击选择按钮 -->
10 <button class="btn" bind:tap="choosephotobtn">
11 <image src="{{icon}}" class="photo" />
12 </button>
13 <view wx:if="{{!username}}">
14 <text class=" welcome-text">
15 欢迎来到动物王国
16 </text>
17 </view>
18 <view wx:else>
19 <text class=" welcome-text">
20 {{username}}
21 </text>
22 </view>
23
24 <navigator url=" /pages/loginpage/loginpage" open-type="navigate" class="logout-button-navigator">
25 <view wx:if="{{!username}}">
26 <view class="logout-button" bind:tap="handleToLoginPage">请登录</view>
27 </view>
28 <view wx:else>
29 <view class="logout-button" bind:tap="handleUpdateUserInfo">编辑信息</view>
30 </view>
31 </navigator>
32
33 </view>
34 <van-toast id="van-toast" />
35
36 <!-- 订单 -->
37
38 <!-- 不要删除这个部分 -->
39 <view class="order-container" wx:if="{{username}}">
40 <view class="order-info">
41 <text class="title">我的订单</text>
42 <navigator url="/pages/order/order?active=quanbu" open-type="navigate" class="all-orders-btn">
43 <view class="all-orders-button">全部</view>
44 </navigator>
45 </view>
46
47 <view class="order-status-bar">
48 <navigator url="/pages/order/order?active=fukuan" open-type="navigate" class="order-status-item">
49 <image src="/static/images/obligation.png" class="status-icon" />
50 <text class="status-text">待付款</text>
51 </navigator>
52 <navigator url="/pages/order/order?active=jiedan" open-type="navigate" class="order-status-item">
53 <image src="/static/images/Pending.png" class="status-icon" />
54 <text class="status-text">待接单</text>
55 </navigator>
56 <navigator url="/pages/order/order?active=shangmen" open-type="navigate" class="order-status-item">
57 <image src="/static/images/Waitsee.png" class="status-icon" />
58 <text class="status-text">待上门</text>
59 </navigator>
60 <navigator url="/pages/order/order?active=jinxing" open-type="navigate" class="order-status-item">
61 <image src="/static/images/underway.png" class="status-icon" />
62 <text class="status-text">进行中</text>
63 </navigator>
64 <navigator url="/pages/order/order?active=wancheng" open-type="navigate" class="order-status-item">
65 <image src="/static/images/endorder.png" class="status-icon" />
66 <text class="status-text">已完成</text>
67 </navigator>
68 </view>
69 </view>
70 <view class="order-container" wx:else>
71 <view class="order-info">
72 <text class="title">我的订单</text>
73 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="all-orders-btn">
74 <view class="all-orders-button">全部</view>
75 </navigator>
76 </view>
77
78 <view class="order-status-bar">
79 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="order-status-item">
80 <image src="/static/images/obligation.png" class="status-icon" />
81 <text class="status-text">待付款</text>
82 </navigator>
83 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="order-status-item">
84 <image src="/static/images/Pending.png" class="status-icon" />
85 <text class="status-text">待接单</text>
86 </navigator>
87 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="order-status-item">
88 <image src="/static/images/Waitsee.png" class="status-icon" />
89 <text class="status-text">待上门</text>
90 </navigator>
91 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="order-status-item">
92 <image src="/static/images/underway.png" class="status-icon" />
93 <text class="status-text">进行中</text>
94 </navigator>
95 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="order-status-item">
96 <image src="/static/images/endorder.png" class="status-icon" />
97 <text class="status-text">已完成</text>
98 </navigator>
99 </view>
100 </view>
101 <!-- 不要删除这个部分 -->
102
103
104 <!-- 我的宠物 -->
105 <view class="animal">
106 <view class="animal-info" wx:if="{{username}}">
107 <text class="title">我的宠物</text>
108 <navigator url="/pages/animal/animal" open-type="navigate" class="animal-more-btn">
109 <view class="animal-more">更多</view>
110 </navigator>
111 </view>
112 <view class="animal-info" wx:else>
113 <text class="title">我的宠物</text>
114 <view class="animal-more" bind:tap="handleMore">更多</view>
115 </view>
116 <view class="content-box" wx:if="{{username}}">
117 <view wx:if="{{petlist!=null}}">
118 <view class="card">
119 <image class="avatar" src="{{petlist.icon}}" alt="头像"></image>
120 <view class="info">
121 <view class="name">{{petlist.name}}</view>
122 <view class="tag-gender">
123 <!-- <text class="tag">{{petlist.pet_type}}</text> -->
124 <view wx:if="{{petlist.gender === '弟弟'}}">
125 <image class="avatar" src="/static/images/bluemale.png" alt="头像" style="height: 40rpx;width: 40rpx;margin-top: -10rpx; margin-bottom: 10rpx;"></image>
126 </view>
127 <view wx:else>
128 <image class="avatar" src="/static/images/bluefemale.png" alt="头像" style="height: 40rpx;width: 40rpx;"></image>
129 </view>
130 </view>
131 <view class="details">
132 <text class="detail">生日月 {{petlist.birthday}} | 品种 {{petlist.variety}}</text>
133 </view>
134 <view class="character" style="margin-top: 20rpx;">
135 <text class="character-text">性格 {{petlist.character}}</text>
136 </view>
137 </view>
138 </view>
139 </view>
140 <view wx:else class="addpetview">
141 <navigator url="/pages/addanimal/addanimal" open-type="navigate" style="display: flex; align-items: center;">
142 <image class="content-image" src="/static/images/add.png" />
143 <view class="content-text">点击添加宠物</view>
144 </navigator>
145 </view>
146
147 </view>
148 <view class="content-box" style="display: flex; justify-content: center; align-items: center;" wx:else>
149 <navigator url="/pages/loginpage/loginpage" open-type="navigate" style="display: flex; align-items: center;">
150 <view class="content-text">登录后管理宠物</view>
151 </navigator>
152 </view>
153 </view>
154
155
156 <!-- 轮播图 可以跳转-->
157 <swiper autoplay interval="3000" indicator-color="#00FF00" indicator-active-color="#70DB93" circular class="swiper-middle3">
158 <swiper-item wx:for="{{middleList}}" wx:key="id">
159 <!-- 如果需要跳转，使用 navigator 包裹 image -->
160 <navigator wx:if="{{item.link}}" url="{{item.link}}" open-type="navigate" class="swiper-items-navigator">
161 <image src="{{item.image}}" mode="widthFix" class="image3" />
162 </navigator>
163 <image wx:else src="{{item.image}}" mode="widthFix" class="image3" />
164 </swiper-item>
165 </swiper>
166
167 <!-- 服务中心 -->
168 <view class="service-center">
169 <view wx:if="{{username.length==0}}" class="suggest" wx:for="{{serviceList}}" wx:key="url">
170 <navigator url="/pages/loginpage/loginpage" open-type="navigate" class="service-status-item">
171 <image src="{{item.icon}}" class="service-icon" />
172 <text class="service-text">{{item.text}}</text>
173 </navigator>
174 </view>
175 <view wx:if='{{username.length!=0}}' class="suggest" wx:for="{{serviceList}}" wx:key="url">
176 <navigator url="{{item.url}}" open-type="navigate" class="service-status-item">
177 <image src="{{item.icon}}" class="service-icon" />
178 <text class="service-text">{{item.text}}</text>
179 </navigator>
180 </view>
181
182 </view>
183
184 ===========================================
185 js
186
187 import settings from '../../static/js/settings.js'
188 import Toast from '@vant/weapp/toast/toast';
189 var app = getApp();
190 // pages/my/my.js
191 Page({
192 data: {
193 middleList: [{
194 id: 1,
195 image: '/static/images/banner10.png',
196 link: '/pages/adopt/adopt'
197 },
198 {
199 id: 2,
200 image: '/static/images/banner8.png'
201 },
202 {
203 id: 3,
204 image: '/static/images/banner4.jpg',
205 link: '/pages/other/other'
206 },
207 {
208 id: 4,
209 image: '/static/images/2.jpg',
210 }
211 ],
212 //服务逻辑
213 serviceList: [{
214 icon: '/static/images/suggests.png',
215 text: '建议反馈',
216 url: '/pages/suggest/suggest'
217 },
218 {
219 icon: '/static/images/collect.png',
220 text: '我的收藏',
221 url: '/pages/collect/collect'
222 },
223 {
224 icon: '/static/images/addr.png',
225 text: '我的地址',
226 url: '/pages/addr/addr'
227 },
228 {
229 icon: '/static/images/agreement.png',
230 text: '平台协议',
231 url: '/pages/agreement/agreement'
232 },
233 {
234 icon: '/static/images/joins.png',
235 text: '加入王国',
236 url: '/pages/joins/joins'
237 },
238 {
239 icon: '/static/images/help.png',
240 text: '客服帮助',
241 url: '/pages/help/help'
242 },
243 {
244 icon: '/static/images/inform.png',
245 text: '订阅通知',
246 url: '/pages/inform/inform'
247 },
248 {
249 icon: '/static/images/discounts.png',
250 text: '优惠券',
251 url: '/pages/discounts/discounts'
252 },
253 {
254 icon: '/static/images/binding.png',
255 text: '邀请绑定',
256 url: '/pages/binding/binding'
257 },
258 {
259 icon: '/static/images/recharge.png',
260 text: '充值',
261 url: '/pages/recharge/recharge'
262 },
263
264 ],
265 username: '',
266 icon: '',
267 petlist: null
268 },
269
270
271 onl oad(options) {
272 this.setData({
273 username: wx.getStorageSync('username'),
274 icon: wx.getStorageSync('icon')
275 })
276 },
277 choosephotobtn() {
278 if (this.data.username) {
279 wx.navigateTo({
280 url: '/pages/user/updateuserinfo/updateuserinfo',
281 })
282 }else{
283 wx.navigateTo({
284 url: '/pages/loginpage/loginpage',
285 })
286 }
287 },
288
289 handleToLoginPage() {
290 wx.navigateTo({
291 url: '/pages/loginpage/loginpage',
292 })
293 },
294 handleUpdateUserInfo() {
295 wx.navigateTo({
296 url: '/pages/user/updateuserinfo/updateuserinfo',
297 })
298 },
299
300
301
302 onShow() {
303 var username = wx.getStorageSync('username')
304 var token = wx.getStorageSync('token')
305 var icon = wx.getStorageSync('icon')
306 // console.log('my',icon)
307 if (username && token && icon) {
308 this.setData({
309 username: username,
310 icon: icon
311 })
312 }
313 if (this.data.username) {
314 wx.request({
315 url: settings.userpet,
316 method: 'GET',
317 header: {
318 'Authorization': 'Bearer ' + wx.getStorageSync('token')
319 },
320 success: (res) => {
321 this.setData({
322 petlist: res.data.results[0]
323 })
324 }
325 })
326 }
327
328 },
329
330 handleMore() {
331 Toast.fail('请先登录!');
332 wx.navigateTo({
333 url: '/pages/loginpage/loginpage',
334 })
335 },
336
337 // ----------------
338 navigateToOrderPage(e) {
339 const tabName = e.currentTarget.dataset.tab; // 获取点击的tab名称
340 wx.navigateTo({
341 url: '/pages/order/order?tab=' + tabName, // 跳转到订单页面，并传递tab参数
342 });
343 },
344 })
345
346 =============================================
347 wxss
348
349 /* pages/my/my.wxss */
350
351 /* 基本样式 */
352 .container {
353 display: flex;
354 align-items: center;
355 justify-content: space-between;
356 padding: 10px;
357 box-sizing: border-box;
358 width: 750rpx;
359 position: fixed;
360 top: 0;
361 left: 0;
362 background-color: #fff;
363 background-image: linear-gradient(to right, #9cc5f1, #b0dbba);
364 z-index: 1000;
365 display: flex;
366 align-items: center;
367 justify-content: space-between;
368 padding: 10rpx;
369 box-sizing: border-box;
370 width: 750rpx;
371 position: fixed;
372 top: 0;
373 left: 0;
374 background-color: #fff;
375 background-image: linear-gradient(to right, #c0dae2, #87d0f8);
376 z-index: 1000;
377 }
378
379 /* 头像按钮样式 */
380 .btn {
381 /* display: flex;
382 align-items: center;
383 justify-content: center; */
384 width: 130rpx;
385 height: 130rpx;
386 background-color: #f0f0f0;
387 margin-left: 0;
388 border-radius: 50%;
389 /* margin-right: 10px; */
390 overflow: hidden;
391 /* 隐藏超出按钮的图片部分 */
392 /* position: relative; 添加相对定位 */
393 width: 130rpx;
394 height: 130rpx;
395 background-color: #f0f0f0;
396 margin-left: 0;
397 border-radius: 50%;
398 overflow: hidden;
399 }
400
401 /* 头像图片样式 */
402 .photo {
403 width: 100%;
404 height: 100%;
405 border-radius: 50%;
406 /* object-fit: cover; */
407 position: absolute;
408 /* 绝对定位 */
409 top: 0;
410 left: 0;
411 width: 100%;
412 height: 100%;
413 border-radius: 50%;
414 position: absolute;
415 top: 0;
416 left: 0;
417 }
418
419 /* 欢迎文本样式 */
420 .welcome-text {
421 position: absolute;
422 top: 0rpx;
423 left: 160rpx;
424 font-size: 35rpx;
425 color: #333;
426 }
427
428 /* 登录按钮样式 */
429 .logout-button-navigator {
430 display: flex;
431 align-items: center;
432 margin-left: auto;
433 }
434
435 .logout-button {
436 display: inline-block;
437 padding: 10px 20px;
438 background-color: #cef1ee;
439 color: rgb(14, 4, 4);
440 border-radius: 10px 10px 10px 10px;
441 text-align: center;
442 overflow: hidden;
443 line-height: 0.4;
444 /* display: flex;
445 align-items: center;
446 margin-left: auto; */
447 }
448
449
450 /* 订单 */
451 .order-container {
452 margin-top: 130rpx;
453 display: flex;
454 flex-direction: column;
455 /* align-items: center; */
456 padding: 10px;
457 background-color: whitesmoke;
458
459 /* background-image: linear-gradient(to right, #fffff0, #b0dbba); */
460 }
461
462 .order-info {
463 display: flex;
464 justify-content: space-between;
465 align-items: center;
466 }
467
468 .title {
469 font-size: 16px;
470 font-weight: bold;
471 }
472
473 .all-orders-btn {
474 display: flex;
475 align-items: center;
476 margin-left: 10px;
477 }
478
479 .all-orders-button {
480 padding: 5px 10px;
481 color: #808080;
482 font-size: 14px;
483 }
484
485 .order-status-bar {
486 display: flex;
487 justify-content: space-around;
488 margin-top: 10px;
489 }
490
491 .order-status-item {
492 display: flex;
493 flex-direction: column;
494 align-items: center;
495 text-align: center;
496 }
497
498 .status-icon {
499 width: 100%;
500 height: 85rpx;
501 margin-bottom: 5rpx;
502 }
503
504 .status-text {
505 font-size: 10rpx;
506 color: #333;
507 margin-top: 20rpx;
508 }
509
510 .order-info {
511 display: flex;
512 justify-content: space-between;
513 align-items: center;
514 }
515
516 .title {
517 font-size: 20rpx;
518 font-weight: bold;
519 }
520
521 .all-orders-btn {
522 display: flex;
523 align-items: center;
524 margin-left: 10rpx;
525 }
526
527 .all-orders-button {
528 color: #808080;
529 }
530
531 .order-status-bar {
532 display: flex;
533 justify-content: space-around;
534 margin-top: 10px;
535
536 }
537
538 .order-status-bar button {
539 display: flex;
540 flex-wrap: wrap;
541 width: 20%;
542 border: none;
543 outline: none;
544 }
545
546 .order-status-item {
547 display: flex;
548 flex-direction: column;
549 align-items: center;
550 text-align: center;
551 }
552
553
554 .status-text {
555 font-size: 30rpx;
556 color: #333;
557 }
558
559 /* 我的宠物 */
560
561 .animal {
562 display: flex;
563 flex-direction: column;
564 padding: 10px;
565 background-color: whitesmoke;
566 }
567
568 .animal-info {
569 display: flex;
570 justify-content: space-between;
571 align-items: center;
572
573 }
574
575 .title {
576 font-size: 18px;
577 }
578
579 .animal-more-btn {
580 display: flex;
581 justify-content: center;
582 align-items: center;
583 margin-left: 10rpx;
584 color: #808080;
585 }
586
587 .animal-more {
588 font-size: 14px;
589 }
590
591 .content-box {
592 text-align: center;
593 border-radius: 50px 50px 50px 50px;
594 background-image: linear-gradient(to right, #d9f1fd, #e7f5fe);
595 overflow: hidden;
596 margin-top: 20rpx;
597 display: flex;
598 flex-direction: column;
599 padding: 10px;
600 background-color: whitesmoke;
601 }
602
603
604 .title {
605 font-size: 18px;
606 }
607
608 .animal-more-btn {
609 display: flex;
610 justify-content: center;
611 align-items: center;
612 margin-left: 10rpx;
613 color: #808080;
614 }
615
616 .animal-more {
617 font-size: 14px;
618 }
619
620
621 .content-image {
622 width: 130rpx;
623 height: 130rpx;
624 border-radius: 50%;
625 width: 130rpx;
626 height: 130rpx;
627 border-radius: 50%;
628
629 }
630
631 .content-text {
632 font-size: 16px;
633 font-size: 16px;
634 }
635
636 /* 轮播图 */
637
638 .swiper-middle3 {
639 height: 250rpx;
640 width: 750rpx;
641 }
642
643 .swiper-items-navigator {
644 /* 确保 navigator 的样式与 image 一致 */
645 display: block;
646 position: relative;
647 width: 750rpx;
648 height: 60rpx;
649 }
650
651 .image3 {
652 /* 图片的样式 */
653 width: 750rpx;
654 height: 60rpx;
655 height: 250rpx;
656 width: 750rpx;
657 }
658
659 .swiper-items-navigator {
660 display: block;
661 position: relative;
662 width: 750rpx;
663 height: 60rpx;
664 }
665
666 .image3 {
667 width: 750rpx;
668 height: 60rpx;
669 }
670
671
672 /* 服务样式 */
673
674 .service-center {
675 margin-top: 20rpx;
676 display: flex;
677 /* flex: 0 0 50%; */
678 flex-flow: row wrap;
679 justify-content: space-between;
680 /* margin-bottom: 30rpx;
681 margin-top: 60rpx; */
682 }
683
684 .suggest {
685 width: 25%;
686 /* flex-basis: calc(25% - 20rpx); 每个项目宽度为25%，考虑到间距 */
687 /* margin-bottom: 50rpx; */
688 }
689
690 .service-status-item {
691 display: flex;
692 flex-direction: column;
693 align-items: center;
694 justify-content: center;
695 flex: 1;
696 /* 让项目在父容器中均匀分布 */
697 }
698
699 .service-icon {
700 width: 60rpx;
701 height: 60rpx;
702 }
703
704 .service-text {
705 margin-top: 10rpx;
706 display: flex;
707 /* flex: 0 0 50%; */
708 flex-flow: row wrap;
709 justify-content: space-between;
710 }
711
712 .suggest {
713 width: 25%;
714 }
715
716 .service-status-item {
717 display: flex;
718 flex-direction: column;
719 align-items: center;
720 justify-content: center;
721 flex: 1;
722 }
723
724 .service-icon {
725 width: 60rpx;
726 height: 60rpx;
727 }
728
729 .service-text {
730 margin-top: 10rpx;
731 }
732
733 /* 将最后一个多出来的图标放在最左边 */
734 .suggest:last-child {
735 order: -1;
736 /* 设置为负值，使其排在最左边 */
737 }
738
739
740 .card {
741 display: flex;
742 flex-direction: row;
743 justify-content: space-between;
744 }
745
746
747
748
749 .avatar {
750 width: 170rpx;
751 /* 头像图片的宽度 */
752 height: 170rpx;
753 /* 头像图片的高度 */
754 border-radius: 50%;
755 /* 圆形图片 */
756 margin-right: 5rpx;
757 /* 右外边距 */
758 }
759
760 .info {
761 flex: 1;
762 display: flex;
763 flex-wrap: wrap;
764 align-content: center;
765 justify-content: center;
766 }
767
768 .name-text {
769 font-size: 32rpx;
770 /* 名字字体大小 */
771 font-weight: bold;
772 color: #333;
773 /* 名字颜色 */
774 }
775
776 .gender-icon {
777 color: #1e90ff;
778 /* 性别图标颜色 */
779 font-size: 32rpx;
780 /* 性别图标大小 */
781 margin-left: 10rpx;
782 /* 左外边距 */
783 }
784
785 .details {
786 width: 100%;
787 font-size: 28rpx;
788 /* 详细信息字体大小 */
789 color: #666;
790 /* 详细信息颜色 */
791 margin-top: 10rpx;
792 /* 上外边距 */
793 }
794
795 .character {
796 width: 100%;
797 margin-top: 10rpx;
798 /* 上外边距 */
799 }
800
801 .character-text {
802 font-size: 28rpx;
803 /* 性格信息字体大小 */
804 color: #333;
805 /* 性格信息颜色 */
806 }
807
808 .addpetview {
809 display: flex;
810 justify-content: center;
811 align-content: center;
812 order: -1;
813 }
814
815
816 =======================================
817 json
818
819 {
820 "usingComponents": {},
821 "navigationBarTitleText":"我的"
822 }
1 order订单页面
2
3 --------------------------------------------------------------------------------------
4 wxml
5
6 <view wx:if="{{active}}">
7 <van-tabs active="{{ active }}" animated bind:change="onChange" swipeable>
8 <van-tab title="全部" name='quanbu'>
9 <view wx:for="{{goods}}" wx:key="*this" wx:for-item="order" style="margin-bottom:10rpx;">
10 <van-cell-group inset>
11 <view class='allordertitle'>
12 <view style="font-weight:bold">
13 {{order.pet.name}}
14 </view>
15 <view style="color:red">
16 {{order.order_status}}
17 </view>
18 </view>
19 <view class='allorderindex'>
20 <view>
21 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
22 </view>
23 <view style="font-size:30rpx;color: gray;">
24 备注 : {{order.remarks}}
25 </view>
26 <view style="font-size:35rpx;">
27 ￥{{order.actual_payment}}
28 </view>
29 </view>
30 <view wx:if="{{order.order_status == '待付款'}}">
31
32 </view>
33 <view class="allorderbottom" wx:else>
34 实付款￥{{order.actual_payment}}
35 </view>
36 <view class="allorderbottombtn">
37 <van-button round type="info" plain custom-style="margin-right:20rpx">查看详情</van-button>
38 <block wx:if="{{order.order_status == '待付款'}}">
39 <van-button round type="info" plain bind:click="toPay" data-orderinfo="{{order}}">立即付款</van-button>
40 </block>
41 <block wx:if="{{order.order_status == '待接单'}}">
42 <van-button round type="info" plain>等待接单</van-button>
43 </block>
44 <block wx:if="{{order.order_status == '待上门'}}">
45 <van-button round type="info" plain>等待上门</van-button>
46 </block>
47 <block wx:if="{{order.order_status == '进行中'}}">
48 <van-button round type="info" plain>进行中</van-button>
49 </block>
50 <block wx:if="{{order.order_status == '已完成'}}">
51 <van-button round type="info" plain>已完成</van-button>
52 </block>
53 </view>
54 </van-cell-group>
55 </view>
56 </van-tab>
57 <van-tab title="待付款" name='fukuan'>
58 <view wx:for="{{daifukuan}}" wx:key="id" wx:for-item="order" style="margin-bottom:10rpx;">
59 <van-cell-group inset>
60 <view class='allordertitle'>
61 <view style="font-weight:bold">
62 {{order.pet.name}}
63 </view>
64 <view style="color:red">
65 {{order.order_status}}
66 </view>
67 </view>
68 <view class='allorderindex'>
69 <view>
70 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
71 </view>
72 <view style="font-size:30rpx;color: gray;">
73 备注 : {{order.remarks}}
74 </view>
75 <view style="font-size:35rpx;">
76 ￥{{order.actual_payment}}
77 </view>
78 </view>
79 <view class="allorderbottombtn">
80 <van-button round type="info" plain custom-style="margin-right:20rpx">查看详情</van-button>
81 <block wx:if="{{order.order_status == '待付款'}}">
82 <van-button round type="info" plain bind:click="toPay" data-orderinfo="{{order}}">立即付款</van-button>
83 </block>
84 <block wx:if="{{order.order_status == '待接单'}}">
85 <van-button round type="info" plain>等待接单</van-button>
86 </block>
87 <block wx:if="{{order.order_status == '待上门'}}">
88 <van-button round type="info" plain>等待上门</van-button>
89 </block>
90 <block wx:if="{{order.order_status == '进行中'}}">
91 <van-button round type="info" plain>进行中</van-button>
92 </block>
93 <block wx:if="{{order.order_status == '已完成'}}">
94 <van-button round type="info" plain>已完成</van-button>
95 </block>
96 </view>
97 </van-cell-group>
98 </view>
99 </van-tab>
100 <van-tab title="待接单" name='jiedan'>
101 <view wx:for="{{daijiedan}}" wx:key="*this" wx:for-item="order" style="margin-bottom:10rpx;">
102 <van-cell-group inset>
103 <view class='allordertitle'>
104 <view style="font-weight:bold">
105 {{order.pet.name}}
106 </view>
107 <view style="color:red">
108 {{order.order_status}}
109 </view>
110 </view>
111 <view class='allorderindex'>
112 <view>
113 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
114 </view>
115 <view style="font-size:30rpx;color: gray;">
116 备注 : {{order.remarks}}
117 </view>
118 <view style="font-size:35rpx;">
119 ￥{{order.actual_payment}}
120 </view>
121 </view>
122 <view class="allorderbottom">
123 实付款￥{{order.actual_payment}}
124 </view>
125 <view class="allorderbottombtn">
126 <van-button round type="info" plain>查看详情</van-button>
127 </view>
128 </van-cell-group>
129 </view>
130 </van-tab>
131 <van-tab title="待上门" name='shangmen'>
132 <view wx:for="{{daishangmen}}" wx:key="*this" wx:for-item="order" style="margin-bottom:10rpx;">
133 <van-cell-group inset>
134 <view class='allordertitle'>
135 <view style="font-weight:bold">
136 {{order.pet.name}}
137 </view>
138 <view style="color:red">
139 {{order.order_status}}
140 </view>
141 </view>
142 <view class='allorderindex'>
143 <view>
144 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
145 </view>
146 <view style="font-size:30rpx;color: gray;">
147 备注 : {{order.remarks}}
148 </view>
149 <view style="font-size:35rpx;">
150 ￥{{order.actual_payment}}
151 </view>
152 </view>
153 <view class="allorderbottom">
154 实付款￥{{order.actual_payment}}
155 </view>
156 <view class="allorderbottombtn">
157 <van-button round type="info" plain>查看详情</van-button>
158 </view>
159 </van-cell-group>
160 </view>
161 </van-tab>
162 <van-tab title="进行中" name='jinxing'>
163 <view wx:for="{{jinxingzhong}}" wx:key="*this" wx:for-item="order" style="margin-bottom:10rpx;">
164 <van-cell-group inset>
165 <view class='allordertitle'>
166 <view style="font-weight:bold">
167 {{order.pet.name}}
168 </view>
169 <view style="color:red">
170 {{order.order_status}}
171 </view>
172 </view>
173 <view class='allorderindex'>
174 <view>
175 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
176 </view>
177 <view style="font-size:30rpx;color: gray;">
178 备注 : {{order.remarks}}
179 </view>
180 <view style="font-size:35rpx;">
181 ￥{{order.actual_payment}}
182 </view>
183 </view>
184 <view class="allorderbottom">
185 实付款￥{{order.actual_payment}}
186 </view>
187 <view class="allorderbottombtn">
188 <van-button round type="info" plain>查看详情</van-button>
189
190 </view>
191 </van-cell-group>
192 </view>
193 </van-tab>
194 <van-tab title="已完成" name='wancheng'>
195 <view wx:for="{{yiwancheng}}" wx:key="*this" wx:for-item="order" style="margin-bottom:10rpx;">
196 <van-cell-group inset>
197 <view class='allordertitle'>
198 <view style="font-weight:bold">
199 {{order.pet.name}}
200 </view>
201 <view style="color:red">
202 {{order.order_status}}
203 </view>
204 </view>
205 <view class='allorderindex'>
206 <view>
207 <image src="{{order.pet.icon}}" style="height: 200rpx;width: 200rpx; border-radius: 50%; " />
208 </view>
209 <view style="font-size:30rpx;color: gray;">
210 备注 : {{order.remarks}}
211 </view>
212 <view style="font-size:35rpx;">
213 ￥{{order.actual_payment}}
214 </view>
215 </view>
216 <view class="allorderbottom">
217 实付款￥{{order.actual_payment}}
218 </view>
219 <view class="allorderbottombtn">
220 <van-button round type="info" plain custom-style="margin-right:20rpx">查看详情</van-button>
221 <van-button round type="info" plain>去评价</van-button>
222 </view>
223 </van-cell-group>
224 </view>
225 </van-tab>
226 </van-tabs>
227 </view>
228
229 <view wx:else>
230 <van-empty description="暂无订单哦" />
231 </view>
232
233 <van-toast id="van-toast" />
234
235 =================================================
236 js
237
238 // pages/order/order.js
239 import settings from '../../static/js/settings.js';
240 import Toast from '@vant/weapp/toast/toast';
241
242 Page({
243 data: {
244 active: '',
245 page: 1,
246 goods: [],
247 size: 4,
248 daifukuan: [],
249 daijiedan: [],
250 daishangmen: [],
251 jinxingzhong: [],
252 yiwancheng: [],
253 },
254 refresh(page) {
255 wx.showLoading({
256 title: '加载中',
257 mask: true
258 });
259 wx.request({
260 url: settings.useroder + '?page=' + page + '&size=' + this.data.size,
261 method: 'GET',
262 header: {
263 'Authorization': 'Bearer ' + wx.getStorageSync('token')
264 },
265 success: (res) => {
266 if (res.data.code == 100) {
267 if (page == 1) {
268 this.setData({
269 goods: res.data.results
270 });
271 } else {
272 const resData = this.data.goods.concat(res.data.results);
273 this.setData({
274 goods: resData
275 });
276 }
277 } else {
278 Toast.fail(res.data.msg);
279 }
280 },
281 complete: () => {
282 wx.hideLoading();
283 }
284 });
285 },
286 onl oad: function (options) {
287 this.setData({
288 active: options.active
289 });
290 },
291 onReachBottom() {
292 if (this.data.page * this.data.size <= this.data.goods.length) {
293 this.data.page++;
294 this.refresh(this.data.page);
295 }
296 },
297 daifukuan() {
298 wx.request({
299 url: settings.daifukuan,
300 method: 'GET',
301 header: {
302 'Authorization': 'Bearer ' + wx.getStorageSync('token')
303 },
304 success: (res) => {
305 console.log(res.data)
306 if (res.data.code == 100) {
307 this.setData({
308 daifukuan: res.data.results
309 });
310 } else {
311 Toast.fail(res.data.msg)
312 }
313 }
314 });
315 },
316 daijiedan() {
317 wx.request({
318 url: settings.daijiedan,
319 method: 'GET',
320 header: {
321 'Authorization': 'Bearer ' + wx.getStorageSync('token')
322 },
323 success: (res) => {
324 if (res.data.code == 100) {
325 this.setData({
326 daijiedan: res.data.results
327 });
328 }
329 }
330 });
331 },
332 daishangmen() {
333 wx.request({
334 url: settings.daishangmen,
335 method: 'GET',
336 header: {
337 'Authorization': 'Bearer ' + wx.getStorageSync('token')
338 },
339 success: (res) => {
340 if (res.data.code == 100) {
341 this.setData({
342 daishangmen: res.data.results
343 });
344 }
345 }
346 });
347 },
348 jinxingzhong() {
349 wx.request({
350 url: settings.jinxingzhong,
351 method: 'GET',
352 header: {
353 'Authorization': 'Bearer ' + wx.getStorageSync('token')
354 },
355 success: (res) => {
356 if (res.data.code == 100) {
357 this.setData({
358 jinxingzhong: res.data.results
359 });
360 }
361 }
362 });
363 },
364 yiwancheng() {
365 wx.request({
366 url: settings.yiwancheng,
367 method: 'GET',
368 header: {
369 'Authorization': 'Bearer ' + wx.getStorageSync('token')
370 },
371 success: (res) => {
372 console.log(res.data.results)
373 if (res.data.code == 100) {
374 this.setData({
375 yiwancheng: res.data.results
376 });
377 }
378 }
379 });
380 },
381 onChange(event) {
382 this.setData({
383 active: event.detail.name
384 });
385 // 清空当前选项的数据，确保不会出现混淆
386 if (this.data.active == 'quanbu') {
387 this.setData({
388 goods: [],
389 page: 1
390 });
391 this.refresh(this.data.page);
392 }
393 if (this.data.active == 'fukuan') {
394 this.setData({
395 daifukuan: [],
396 });
397 this.daifukuan();
398 }
399 if (this.data.active == 'jiedan') {
400 this.setData({
401 daijiedan: [],
402 });
403 this.daijiedan();
404 }
405 if (this.data.active == 'shangmen') {
406 this.setData({
407 daishangmen: [],
408 });
409 this.daishangmen();
410 }
411 if (this.data.active == 'jinxing') {
412 this.setData({
413 jinxingzhong: [],
414 });
415 this.jinxingzhong();
416 }
417 if (this.data.active == 'wancheng') {
418 this.setData({
419 yiwancheng: [],
420 });
421 this.yiwancheng();
422 }
423 },
424 onShow() {
425 if (this.data.active == 'quanbu') {
426 this.refresh(this.data.page);
427 }
428 if (this.data.active == 'fukuan') {
429 this.daifukuan();
430 }
431 if (this.data.active == 'jiedan') {
432 this.daijiedan();
433 }
434 if (this.data.active == 'shangmen') {
435 this.daishangmen();
436 }
437 if (this.data.active == 'jinxing') {
438 this.jinxingzhong();
439 }
440 if (this.data.active == 'wancheng') {
441 this.yiwancheng();
442 }
443 },
444
445 toPay(e) {
446 const orderid = e.currentTarget.dataset.orderinfo.order_id;
447 const actual_payment = e.currentTarget.dataset.orderinfo.actual_payment
448
449 wx.request({
450 url: settings.order_pay,
451 method: 'POST',
452 data: {
453 order_id: orderid,
454 actual_payment: actual_payment,
455 },
456 header: {
457 'Authorization': 'Bearer ' + wx.getStorageSync('token')
458 },
459 success: (res) => {
460 if (res.data.code == 100) {
461 Toast.success(res.data.msg)
462 setTimeout(() => {
463 wx.reLaunch({
464 url: '/pages/order/order?active=quanbu',
465 })
466 }, 2000);
467 } else {
468 Toast.success(res.data.msg)
469 setTimeout(() => {
470 wx.redirectTo({
471 url: '/pages/recharge/recharge',
472 })
473 }, 2000);
474 }
475 }
476 })
477 }
478
479 });
480
481 ================================================
482 wxss
483
484 /* pages/order/order.wxss */
485 .allordertitle{
486 display: flex;
487 justify-content: space-between;
488 }
489
490 .allorderindex{
491 display: flex;
492 justify-content: space-between;
493 }
494
495 .allorderbottom{
496 display: flex;
497 justify-content: flex-end;
498 font-size: 35rpx;
499
500 }
501
502 .allorderbottombtn{
503 display: flex;
504 justify-content: flex-end;
505 margin-top: 10rpx;
506 }
1 pet/chat 聊条界面
2
3 --------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/pet/chat/chat.wxml-->
7 <view class="chat-container">
8 <block wx:for="{{message}}" wx:key="index">
9 <view class="chat-item received" wx:if="{{item.receiver === now_user}}">
10 <view class="message">
11 <view class="message-info">
12 <view class="send-time">{{item.send_time}}</view>
13 <view class="sender">{{feeder_name}}</view>
14 </view>
15 <view class="message-content">{{item.content}}</view>
16 </view>
17 </view>
18 <view class="chat-item sent" wx:if="{{item.sender === now_user}}">
19 <view class="message">
20 <view class="message-info">
21 <view class="send-time">{{item.send_time}}</view>
22 <view class="sender">{{item.sender}}</view>
23 </view>
24 <view class="message-content">{{item.content}}</view>
25 </view>
26 </view>
27 </block>
28 </view>
29
30 <view class="input-container">
31 <van-cell-group>
32 <van-field
33 model:value="{{ content }}"
34 center
35 clearable
36 placeholder="请输入要发送的消息"
37 border="{{ false }}"
38 use-button-slot
39 >
40 <van-button slot="button" size="small" type="primary" bind:tap="handleSendmsg">
41 发送消息
42 </van-button>
43 </van-field>
44 </van-cell-group>
45 </view>
46
47 <van-toast id="van-toast" />
48
49 =============================================
50 js
51
52 // pages/pet/chat/chat.js
53 import Toast from '@vant/weapp/toast/toast';
54 import settings from '../../../static/js/settings.js'
55
56 Page({
57 data: {
58 now_user: wx.getStorageSync('username'),
59 send_name: '',
60 recv_id: '',
61 token: wx.getStorageSync('token'),
62 message: {},
63 content: '',
64 intervalId: null, // 定时器ID
65 scrolling: false, // 是否正在滚动
66 lastScrollTop: 0 // 上一次的滚动位置
67 },
68
69 check_msg() {
70 wx.request({
71 url: settings.message,
72 data: {
73 send_name: this.data.send_name,
74 recv_id: this.data.recv_id
75 },
76 header: {
77 Authorization: 'Bearer ' + this.data.token
78 },
79 success: (res) => {
80 if (res.data.code == 100) {
81 // console.log(res.data.results)
82 this.setData({
83 message: res.data.results
84 }, () => {
85 // Scroll to the bottom of the page if not scrolling
86 if (!this.data.scrolling) {
87 wx.pageScrollTo({
88 scrollTop: 9999,
89 duration: 300
90 });
91 }
92 // console.log(res.data.results)
93 });
94 }
95 }
96 });
97 },
98
99 startTimer() {
100 // 设置定时器，每2秒调用一次 check_msg
101 const intervalId = setInterval(() => {
102 this.check_msg();
103 }, 2000);
104 // 保存定时器ID
105 this.setData({
106 intervalId: intervalId
107 });
108 },
109
110 stopTimer() {
111 // 清除定时器
112 clearInterval(this.data.intervalId);
113 this.setData({
114 intervalId: null
115 });
116 },
117
118 onl oad(options) {
119 this.setData({
120 send_name: options.send_name,
121 recv_id: options.recv_id,
122 feeder_name : options.feeder_name
123 });
124 this.check_msg();
125 this.startTimer();
126 },
127
128 onUnload() {
129 this.stopTimer();
130 },
131
132 handleSendmsg() {
133 wx.request({
134 url: settings.message,
135 method: 'POST',
136 data: {
137 sender: this.data.send_name,
138 receiver: this.data.recv_id,
139 content: this.data.content
140 },
141 header: {
142 Authorization: 'Bearer ' + this.data.token
143 },
144 success: (res) => {
145 if (res.data.code == 100) {
146 // console.log(res.data.results)
147 Toast.success('发送成功!');
148 this.setData({
149 content: ''
150 });
151 this.check_msg();
152 }else{
153 console.log('发送失败')
154 }
155 }
156 });
157 },
158
159 onPageScroll(event) {
160 // 检测滚动方向
161 if (event.scrollTop > this.data.lastScrollTop) {
162 // 向下滚动
163 if (!this.data.intervalId) {
164 this.startTimer();
165 }
166 } else {
167 // 向上滚动
168 if (this.data.intervalId) {
169 this.stopTimer();
170 }
171 }
172 this.setData({
173 lastScrollTop: event.scrollTop
174 });
175 }
176 });
177
178
179 ===========================================
180 wxss
181
182 /*pages/pet/chat/chat.wxss*/
183 .chat-container {
184 display: flex;
185 flex-direction: column;
186 padding: 10px;
187 padding-bottom: 70px; /* 为了避免输入框遮挡最后的消息 */
188 }
189
190 .chat-item {
191 display: flex;
192 align-items: flex-start;
193 margin-bottom: 10px;
194 }
195
196 .message {
197 max-width: 100%;
198 display: flex;
199 flex-direction: column;
200 }
201
202 .message-info {
203 display: flex;
204 flex-direction: column; /* 垂直排列 */
205 margin-bottom: 5px;
206 justify-content: center;
207 align-content:center;
208 }
209
210 .message-content {
211 padding: 10px;
212 border-radius: 10px;
213 word-wrap: break-word;
214 overflow-wrap: break-word;
215 }
216
217 .received .message-content {
218 background-color: #f1f1f1;
219 align-self: flex-start;
220 }
221
222 .sent .message-content {
223 background-color: #9EEA6A;
224 align-self: flex-end;
225 }
226
227 .sent {
228 align-self: flex-end;
229 text-align: right;
230 }
231
232 .send-time {
233 font-size: 12px;
234 color: gray;
235 }
236
237 .sender {
238 font-size: 14px;
239 color: red;
240 }
241
242 .input-container {
243 position: fixed;
244 bottom: 0;
245 width: 100%;
246 background-color: #fff;
247 padding: 10px 0;
248 }
249
1 feederdetail喂养员主页
2 --------------------------------------------------------------------------
3 wxml
4
5 <!-- 图片 -->
6 <view>
7 <image src="/static/images/feeder_detail.png" mode="" style="width:750rpx;height: 300rpx;" />
8 </view>
9
10 <!-- 介绍 -->
11 <view class="container">
12 <view class="profile">
13 <image class="avatar" src="{{feederinfo.icon}}" />
14 <view class="info">
15 <view class='name'>
16 {{feederinfo.name}}
17 <image src="{{feederinfo.gender === '男' ? '/static/images/male.png' : '/static/images/female.png'}}" class="gender-icon" />
18 </view>
19 <view class="badge">优选喂养员</view>
20 </view>
21 </view>
22
23 <view class="description">
24 <text>{{feederinfo.desc}}</text>
25 </view>
26
27 <view class="pets">
28 <view wx:if="{{feederinfo.gender === '男'}}">
29 <text class="pets-title">他的宠物：</text>
30 </view>
31 <view wx:else>
32 <text class="pets-title">她的宠物：</text>
33 </view>
34 <view class="pet-list">
35 <image class="pet" src="/static/images/cateat.png" />
36 <image class="pet" src="/static/images/cateat.png" />
37 <image class="pet" src="/static/images/cateat.png" />
38 </view>
39 <button class="view-more">查看宠物</button>
40 </view>
41
42 <view class="luxiangimg">
43 <image src="/static/images/xiangxijieshao.png" style="width: 750rpx;height: 75rpx;" />
44 </view>
45
46 <!-- 选择 -->
47 <view class="header">
48 <view class="title">宠物喂养</view>
49 <view class="sub-title">上门遛狗</view>
50 </view>
51
52 <!-- 服务项目 -->
53 <view class="services">
54 <van-grid column-num="3">
55 <van-grid-item text="添粮换水">
56 <view slot="icon">
57 <i class="iconfont icon-gouliang1"></i>
58 </view>
59 </van-grid-item>
60 <van-grid-item text="碗具清洁">
61 <view slot="icon">
62 <i class="iconfont icon-a-060_shipen"></i>
63 </view>
64 </van-grid-item>
65 <van-grid-item text="宠物卫生">
66 <view slot="icon">
67 <i class="iconfont icon-xiedaichongwu"></i>
68 </view>
69 </van-grid-item>
70 <van-grid-item text="门窗通风">
71 <view slot="icon">
72 <i class="iconfont icon-menchuangmenchuangwujinanzhuang"></i>
73 </view>
74 </van-grid-item>
75 <van-grid-item text="观察监测">
76 <view slot="icon">
77 <i class="iconfont icon-xindiantu"></i>
78 </view>
79 </van-grid-item>
80 <van-grid-item text="全程录像">
81 <view slot="icon">
82 <i class="iconfont icon-luxiang"></i>
83 </view>
84 </van-grid-item>
85 </van-grid>
86 <text class="service-duration">服务时长</text>
87 <text class="duration">{{feederinfo.service_duration}}</text>
88 <text style="font-size: 23rpx;">喂养员上门后根据实际情况决定具体服务时长</text>
89 <text class="price">¥{{feederinfo.price}}/次</text>
90 </view>
91 <!-- 服务时长和价格 -->
92 <view class="service-details">
93 <image src="/static/images/detail/fuwuxiangjie.jpg" style="width:100%;" />
94 <image src="/static/images/detail/gengduofuwu.png" style="width:100%;" />
95 </view>
96 <van-toast id="van-toast" />
97 <!-- 固定在底部的按钮 -->
98 <view class="fixed-buttons">
99 <button class="consult-btn" bind:tap="handleToChat">咨询一下</button>
100 <button class="book-btn" bind:tap="handleToReserve">立即预约</button>
101
102 </view>
103 </view>
104
105 ============================================
106 js
107
108 // pages/pet/feederdetail/feederdetail.js
109 import Toast from '@vant/weapp/toast/toast';
110 import settings from '../../../static/js/settings.js'
111 Page({
112 data: {
113 feederid: '',
114 feederinfo: {},
115 feeder_name:''
116 },
117 onl oad(options) {
118 this.setData({
119 feederid: options.index
120 })
121 wx.request({
122 url: settings.pet_feeder + this.data.feederid + '/',
123 method: 'GET',
124 success: (res) => {
125 if (res.data.code == 100) {
126 this.setData({
127 feederinfo: res.data.result,
128 feeder_name:res.data.result.name
129 })
130 wx.setStorageSync('feeder_name', res.data.result.name)
131 }
132 }
133 })
134
135 },
136 handleToChat() {
137 const token = wx.getStorageSync('token')
138 const username = wx.getStorageSync('username')
139 if (token) {
140 wx.navigateTo({
141 url: '/pages/pet/chat/chat?send_name=' + username + '&' + 'recv_id=' + this.data.feederid + '&' + 'feeder_name=' + this.data.feeder_name
142 })
143 } else {
144 Toast({
145 type: 'fail',
146 message: '请先登录!',
147 onClose: () => {
148 wx.switchTab({
149 url: '/pages/my/my',
150 })
151 },
152 });
153 }
154 },
155 handleToReserve() {
156 wx.navigateTo({
157 url: '/pages/pet/reserve/reserve?feeder_id=' + this.data.feederid + '&' + 'feeder_price=' + this.data.feederinfo.price + '&' + 'feeder_name=' + this.data.feederinfo.name,
158 })
159 }
160
161 })
162
163 ============================================
164 wxss
165
166 /* 页面整体样式 */
167 .container {
168 padding: 20px;
169 background-color: #f0f8ff;
170 margin-bottom: 80px; /* 给底部按钮预留空间 */
171 }
172
173 .profile {
174 display: flex;
175 align-items: center;
176 }
177
178 .avatar {
179 width: 80px;
180 height: 80px;
181 border-radius: 50%;
182 margin-right: 10px;
183 }
184
185 .info {
186 display: flex;
187 flex-direction: column;
188 }
189
190 .name {
191 font-size: 24px;
192 font-weight: bold;
193 }
194
195 .badge {
196 background-color: #ffcc00;
197 color: white;
198 padding: 2px 8px;
199 border-radius: 4px;
200 font-size: 14px;
201 margin-top: 4px;
202 }
203
204 .description {
205 margin-top: 20px;
206 font-size: 16px;
207 line-height: 1.5;
208 color: #333;
209 }
210
211 .pets {
212 margin-top: 20px;
213 }
214
215 .pets-title {
216 font-size: 18px;
217 font-weight: bold;
218 }
219
220 .pet-list {
221 display: flex;
222 margin-top: 10px;
223 }
224
225 .pet {
226 width: 60px;
227 height: 60px;
228 border-radius: 50%;
229 margin-right: 10px;
230 }
231
232 .view-more {
233 margin-top: 10px;
234 padding: 6px 12px;
235 background-color: #ffcc00;
236 color: white;
237 border: none;
238 border-radius: 4px;
239 font-size: 14px;
240 }
241
242 .gender-icon {
243 width: 15px;
244 height: 15px;
245 margin-left: 5px;
246 }
247
248 /* 固定按钮样式 */
249 .fixed-buttons {
250 position: fixed;
251 bottom: 0;
252 left: 0;
253 right: 0;
254 display: flex;
255 justify-content: space-around;
256 background-color: #fff;
257 padding: 10px 0;
258 box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
259 }
260
261 .consult-btn, .book-btn {
262 flex: 1;
263 margin: 0 10px;
264 padding: 10px;
265 font-size: 16px;
266 color: #fff;
267 background-color: #007bff;
268 border: none;
269 border-radius: 5px;
270 text-align: center;
271 }
272
273 .book-btn {
274 background-color: #28a745;
275 }
276
277 /* 确保父容器没有影响布局的样式 */
278 .luxiangimg {
279 padding: 0; /* 移除子组件的padding */
280 margin: 0; /* 移除子组件的margin */
281 width: 100%; /* 确保容器占满父容器的宽度 */
282 box-sizing: border-box; /* 包括padding和border在内的盒子模型 */
283 display: flex;
284 justify-content: center; /* 水平居中对齐 */
285 }
286
287 .header {
288 display: flex;
289 justify-content: space-between;
290 align-items: center;
291 margin-bottom: 20px;
292 }
293
294 .title {
295 font-size: 24px;
296 font-weight: bold;
297 color: #007bff;
298 }
299
300 .sub-title {
301 font-size: 20px;
302 color: #333;
303 }
304
305 .services {
306 display: flex;
307 flex-wrap: wrap;
308 justify-content: space-between;
309 background-color: #fff;
310 padding: 20px;
311 border-radius: 10px;
312 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
313 margin-bottom: 20px;
314 }
315
316 .service-item {
317 width: 30%;
318 text-align: center;
319 margin-bottom: 20px;
320 }
321
322 .service-item .icon {
323 width: 50px;
324 height: 50px;
325 margin-bottom: 10px;
326 }
327
328 .service-details {
329 background-color: #fff;
330 border-radius: 10px;
331 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
332 margin-bottom: 20px;
333 text-align: center;
334 }
335
336 .service-duration {
337 font-size: 15px;
338 font-weight: bold;
339 margin-bottom: 10px;
340 }
341
342 .duration {
343 font-size: 16px;
344 color: #333;
345 margin-top: 10px;
346 }
347
348 .price {
349 font-size: 20px;
350 font-weight: bold;
351 color: #e53e3e;
352 margin-top: 10px;
353 }
354
355 .extra-pricing {
356 background-color: #fff;
357 border-radius: 10px;
358 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
359 margin-bottom: 20px;
360 }
361
362 .extra-item {
363 display: flex;
364 align-items: center;
365 margin-bottom: 10px;
366 }
367
368 .extra-item .icon {
369 width: 40px;
370 height: 40px;
371 margin-right: 10px;
372 }
373
374 .extra-item text {
375 flex: 1;
376 font-size: 16px;
377 color: #333;
378 }
379
380 .service-details-link {
381 background-color: #fff;
382 padding: 20px;
383 border-radius: 10px;
384 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
385 text-align: center;
386 }
387
388 .service-details-link navigator {
389 display: flex;
390 align-items: center;
391 }
392
393 .service-details-link .icon {
394 width: 30px;
395 height: 30px;
396 margin-right: 10px;
397 }
1 petfeeder 选择喂养员
2
3 --------------------------------------------------------------------------
4 wxml
5
6 <!-- pages/pet/petfeeder/petfeeder.wxml -->
7 <view class="container">
8 <!-- 单选框 -->
9 <text>筛选</text>
10 <view>
11 <van-radio-group value="{{ radio }}" bind:change="onChange">
12 <van-radio name="2">全部</van-radio>
13 <van-radio name="0">猫咪</van-radio>
14 <van-radio name="1">狗狗</van-radio>
15 </van-radio-group>
16 </view>
17
18 <!-- 喂养员列表 -->
19 <view wx:for="{{pet_feeder}}" wx:key="id">
20 <navigator url="/pages/pet/feederdetail/feederdetail?index={{radio === '' ? item.feeder.id : item.id}}">
21 <van-card class="pet-feeder-card" desc="{{radio === '' ? item.feeder.desc : item.desc}}" thumb="{{radio === '' ? item.feeder.icon : item.icon}}">
22 <view slot="title">
23 {{radio === '' ? item.feeder.name : item.name }}
24 <image src="{{item.feeder.gender === '男' ? '/static/images/male.png' : '/static/images/female.png'}}" class="gender-icon" />
25 </view>
26 <view slot="bottom" class="service-info">
27 <text>服务次数: {{item.feeder.service_count}} 次</text>
28 </view>
29 <view slot="tags">
30 <span class="van-tag van-tag--plain van-tag--danger" style="margin-right: 5px;">
31 喂养类别:{{ radio === '' ? item.feeder.feed_type : item.feed_type}}
32 </span>
33 </view>
34 </van-card>
35 </navigator>
36 <van-divider wx:if="{{index !== pet_feeder.length - 1}}" />
37 </view>
38 </view>
39
40 ============================================
41 js
42
43 import settings from '../../../static/js/settings.js'
44 Page({
45 data: {
46 now_user: wx.getStorageSync('username'),
47 date: '',
48 show: false,
49 radio: '',
50 pet_feeder: {},
51 now_user_feeder_name : wx.getStorageSync('feeder_name')
52 },
53 onl oad(){
54 wx.request({
55 url: settings.pet_feeder,
56 method: 'GET',
57 success: (res) => {
58 if (res.data.code == 100) {
59 let filteredResults = res.data.results.filter(item => item.username !== this.data.now_user)
60 this.setData({
61 pet_feeder: filteredResults
62 })
63 } else {
64 console.log('请求错误!')
65 }
66 }
67 })
68 },
69 onShow(options) {
70 wx.request({
71 url: settings.pet_feeder,
72 method: 'GET',
73 success: (res) => {
74 if (res.data.code == 100) {
75 let filteredResults = res.data.results.filter(item => item.username !== this.data.now_user)
76 this.setData({
77 pet_feeder: filteredResults
78 })
79 } else {
80 console.log('请求错误!')
81 }
82 }
83 })
84 },
85
86
87
88
89
90
91 onDisplay() {
92 this.setData({
93 show: true
94 });
95 },
96 onClose() {
97 this.setData({
98 show: false
99 });
100 },
101 formatDate(date) {
102 date = new Date(date);
103 return `${date.getMonth() + 1}/${date.getDate()}`;
104 },
105 onConfirm(event) {
106 this.setData({
107 show: false,
108 date: this.formatDate(event.detail),
109 });
110 },
111 onChange(event) {
112 this.setData({
113 radio: event.detail,
114 });
115 wx.request({
116 url: settings.pet_feeder_filter,
117 method: "GET",
118 data: {
119 radio: this.data.radio
120 },
121 success: (res) => {
122 if (res.data.code == 100) {
123 console.log(res.data.results)
124 let filteredResults = res.data.results.filter(item => item.name !== this.data.now_user_feeder_name)
125 this.setData({
126 pet_feeder: filteredResults
127 })
128 }
129 }
130 })
131
132 },
133 });
134
135 ===============================================
136 wxss
137
138 /* pages/pet/petfeeder/petfeeder.wxss */
139 .container {
140 padding: 10px;
141 }
142
143 .top-bar {
144 display: flex;
145 align-items: center;
146 padding: 10px 0;
147 }
148
149 .location-icon {
150 width: 20px;
151 height: 20px;
152 margin-right: 5px;
153 }
154
155 .location-text {
156 flex: 1;
157 font-size: 16px;
158 }
159
160 .time-select-button {
161 padding: 5px 10px;
162 background-color: #ff8c00;
163 color: white;
164 border: none;
165 border-radius: 5px;
166 }
167
168 .radio-group-container {
169 display: flex;
170 justify-content: space-between; /* 确保左右对齐 */
171 padding: 10px 0;
172 }
173
174 .radio-group {
175 display: flex;
176 width: 100%;
177 }
178
179 .radio-item {
180 flex: 1;
181 display: flex;
182 justify-content: center; /* 使单选按钮在每个容器内居中 */
183 }
184
185 .pet-feeder-card {
186 margin-bottom: 10px;
187 }
188
189 .gender-icon {
190 width: 15px;
191 height: 15px;
192 margin-left: 5px;
193 }
194
195 .service-info {
196 color: red;
197 }
198
199 .van-tag--plain {
200 background-color: #fff;
201 border-color: currentColor;
202 }
1 regfeeder喂养员注册页面
2
3
4 ----------------------------------------------------------------------
5 wxml
6
7 <view>
8 <view>
9 <text>动物王国喂养员注册</text>
10 </view>
11 <view>
12 <text>查看注册要求，工作详情，服务酬劳等信息></text>
13 </view>
14 </view>
15
16
17
18 <view class='cus-c'>
19 <van-cell-group inset>
20 <van-field model:value="{{ realname }}" placeholder="请输入您的真实姓名" border="{{ false }}" label="姓名" input-align="right" />
21
22 <van-field model:value="{{ gender }}" border="{{ false }}" label="性别" input-align="right" is-link="{{ true }}" readonly="{{true}}" bind:tap="handleShow"/>
23
24 <van-field model:value="{{ desc }}" placeholder="请输入介绍" border="{{ false }}" label="介绍" input-align="right" />
25
26 <van-field model:value="{{ sd }}" border="{{ false }}" label="服务时长" input-align="right" />
27
28 <van-field model:value="{{ price }}" placeholder="请输入期望酬劳" border="{{ false }}" label="酬劳/时" input-align="right" />
29
30 <van-field model:value="{{ type }}" is-link="{{ true }}" readonly="{{true}}" border="{{ false }}" label="喂养类别" input-align="right" bind:tap="handleShow1"/>
31 </van-cell-group>
32 </view>
33 <van-toast id="van-toast" />
34 <view>
35 <view class="bottombtn">
36 <van-button round type="info" plain="{{true}}" custom-style="width:530rpx;color:grey;border:1px solid #F0F0F0;" bind:tap="handleCommit">提交</van-button>
37 </view>
38 </view>
39
40
41
42 <van-action-sheet
43 show="{{ show }}"
44 actions="{{ gender_list }}"
45 cancel-text="取消"
46 bind:cancel="handleCancel"
47 bind:select="handleSelect"
48 bind:click-overlay="handleClickOver"
49 />
50
51
52 <van-action-sheet
53 show="{{ show1 }}"
54 actions="{{ type_list }}"
55 cancel-text="取消"
56 bind:cancel="handleCancel1"
57 bind:select="handleSelect1"
58 bind:click-overlay="handleClickOver1"
59 />
60
61 =============================================
62 js
63
64 // pages/pet/regfeeder/regfeeder.js
65 import Toast from '@vant/weapp/toast/toast';
66 import settings from '../../../static/js/settings.js'
67 Page({
68 data: {
69 show: false,
70 show1: false,
71 realname: '',
72 gender: '',
73 intgender:'',
74 gender_list: [{
75 name: '男',
76 },
77 {
78 name: '女',
79 },
80 ],
81 sd:'',
82 type_list: [{
83 name: '猫咪',
84 },
85 {
86 name: '狗狗',
87 },
88 ],
89 type:'',
90 inttype:'',
91 desc:'',
92 price:'',
93 },
94
95 // 性别选择
96 handleShow() {
97 this.setData({
98 show: true
99 })
100 },
101 handleCancel() {
102 this.setData({
103 show: false
104 })
105 },
106 handleSelect(event) {
107 if (event.detail.name =='男'){
108 this.setData({
109 gender: event.detail.name,
110 intgender:'1',
111 show: false
112 })
113 }else{
114 this.setData({
115 gender: event.detail.name,
116 intgender:'0',
117 show: false
118 })
119 }
120
121 },
122 handleClickOver() {
123 this.setData({
124 show: false
125 })
126 },
127
128 // 宠物类别选择
129 handleShow1() {
130 this.setData({
131 show1: true
132 })
133 },
134 handleCancel1() {
135 this.setData({
136 show1: false
137 })
138 },
139 handleSelect1(event) {
140 if (event.detail.name =='猫咪'){
141 this.setData({
142 type: event.detail.name,
143 inttype:'0',
144 show1: false
145 })
146 }else{
147 this.setData({
148 type: event.detail.name,
149 inttype:'1',
150 show1: false
151 })
152 }
153 },
154 handleClickOver1() {
155 this.setData({
156 show1: false
157 })
158 },
159
160 // 注册按钮
161 handleCommit(){
162 let realname=this.data.realname
163 let gender=this.data.intgender
164 let desc=this.data.desc
165 let sd=this.data.sd
166 let price=this.data.price
167 let type = this.data.inttype
168 if (realname && gender && desc && sd && price && type){
169 wx.request({
170 url: settings.regfeeder,
171 method:'POST',
172 data:{
173 name:realname,
174 gender:gender,
175 desc:desc,
176 service_duration:sd,
177 price:price,
178 feed_type:type
179 },
180 header:{
181 'Authorization':'Bearer ' + wx.getStorageSync('token')
182 },
183 success:res=>{
184 if (res.data.code == 100) {
185 Toast.success(res.data.msg);
186 setTimeout(() => {
187 wx.switchTab({
188 url: '/pages/my/my',
189 });
190 }, 2000); // 延迟1.5秒跳转
191 } else {
192 Toast.fail(res.data.msg);
193 setTimeout(() => {
194 wx.switchTab({
195 url: '/pages/my/my',
196 });
197 }, 2000); // 延迟1.5秒跳转
198 }
199 }
200 })
201 }else{
202 Toast.fail('有选项未填!');
203 }
204 }
205
206 })
207
208 ==============================================
209 wxss
210
211 /* pages/pet/regfeeder/regfeeder.wxss */
212
213 page{
214 background-color: grey;
215 }
216
217 .cus-c{
218 margin-top: 50rpx;
219 }
220
221 .bottombtn{
222 position: fixed; /* 固定定位 */
223 bottom: 30px; /* 距离底部20像素 */
224 left: 50%; /* 水平居中 */
225 transform: translateX(-50%); /* 使按钮水平居中 */
226 }
1 reserve 预约喂养员
2
3 ------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/pet/reserve/reserve.wxml-->
7 <view>
8 <text style="color: red;">
9 当前预约喂养员 : {{feeder_name}}
10 </text>
11 </view>
12 <view style="margin-top: 40rpx;">
13 <van-cell-group inset>
14 <van-cell title="服务地址" border="{{false}}" icon="location-o" />
15 <van-cell>
16 <view wx:if="{{addr_mobile}}" bind:tap="handleChangeAddr">
17 {{addr_name}}
18 {{addr_mobile}}
19 <view>
20 {{addr_province}}
21 {{addr_city}}
22 {{addr_detail}}
23 </view>
24 </view>
25 <view wx:else class="addAddress">
26 <van-button round type="info" plain bind:tap="handelAddr">添加地址</van-button>
27 </view>
28 </van-cell>
29 </van-cell-group>
30 </view>
31
32 <view style="margin-top: 40rpx;" >
33 <van-cell-group inset>
34 <!-- 换图标 -->
35 <van-cell title="服务宠物" border="{{false}}" icon="smile-o" />
36 <van-cell>
37 <view wx:if="{{pet_id}}" bind:tap="handleChangePet" class="addpetview">
38 <image src="{{pet_icon}}" mode="" class="addpetimage"/>
39 </view>
40 <view wx:else class="addAddress">
41 <van-button round type="info" plain bind:tap="handelPet">添加宠物</van-button>
42 </view>
43 </van-cell>
44 </van-cell-group>
45 </view>
46
47 <view style="margin-top: 40rpx;">
48 <van-cell-group inset>
49 <!-- 换图标 -->
50 <van-cell title="服务细则" border="{{false}}" icon="smile-o" />
51 <van-cell title="期望上门时间" is-link="{{true}}" model:value="{{DoorTime}}" label="选择喂养员方便上门的时间" bind:tap="handleShowDoorTime" />
52 </van-cell-group>
53 </view>
54
55 <van-popup show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:close="onClose" bind:click-overlay="onOverlay">
56 <van-datetime-picker type="datetime" min-date="{{ minDate }}" max-date="{{ maxDate }}" min-hour="{{ minHour }}" max-hour="{{ maxHour }}" min-minute="{{ minMinute }}" max-minute="{{ maxMinute }}" bind:confirm="handleConfirm" bind:cancel="handleCancel" />
57 </van-popup>
58
59 <view style="margin-top: 40rpx;">
60 <van-cell-group inset>
61 <!-- 换图标 -->
62 <van-cell title="备注" border="{{false}}" icon="orders-o" />
63 <van-field model:value="{{ remarks }}" type="textarea" placeholder="如果有，请输入备注" autosize border="{{ false }}" />
64 </van-cell-group>
65 </view>
66
67 <view class="bottom-btn">
68 <van-button round type="info" bind:tap="handleToCommit">立即下单</van-button>
69 </view>
70
71
72 <view style="margin-left: 30rpx; margin-right: 30rpx;">
73 <text style="font-size:30rpx; color: gray; ">
74 提示：宠物王国可以确保每一位喂养员都是有着资深科学养宠经验的铲屎官，但部分用户以宠物喂养的名义，引诱异性喂养员上门，并做出不道德行为，请及时报警求助，宠物王国会全力协助。
75 </text>
76 </view>
77
78 <van-toast id="van-toast" />
79
80 =======================================
81 js
82
83 // pages/pet/reserve/reserve.js
84 const app = getApp();
85 import settings from '../../../static/js/settings.js'
86 import Toast from '@vant/weapp/toast/toast';
87 Page({
88 data: {
89 feeder_id: null,
90 show: false,
91 minDate: new Date().getTime(),
92 maxDate: null,
93 DoorTime: '请选择',
94 addr_id: null,
95 addr_name: null,
96 addr_mobile: null,
97 addr_province: null,
98 addr_city: null,
99 addr_detail: null,
100 addr_is_default: null,
101 minHour: 11, // 最小小时为11点
102 maxHour: 21, // 最大小时为21点
103 minMinute: 0, // 最小分钟
104 maxMinute: 59, // 最大分钟
105 feeder_price: 0,
106 remarks: null,
107 pet_id: null,
108 pet_name: null,
109 pet_gender: null,
110 pet_birthday: null,
111 pet_character: null,
112 pet_pet_type: null,
113 pet_variety: null,
114 pet_weight: null,
115 pet_icon: null
116 },
117
118 onl oad(options) {
119 const currentYear = new Date().getFullYear();
120 const maxDate = new Date(currentYear, 11, 31).getTime(); // 11代表12月，31代表该月最后一天
121 if (options.feeder_price){
122 this.setData({
123 feeder_id: options.feeder_id,
124 maxDate: maxDate,
125 feeder_price: options.feeder_price,
126 feeder_name: options.feeder_name,
127 })
128 }else{
129 this.setData({
130 feeder_id: options.feeder_id,
131 maxDate: maxDate,
132 feeder_price: 0,
133 feeder_name: options.feeder_name,
134 })
135 }
136 },
137 onClose() {
138 this.setData({
139 show: false
140 })
141 },
142 onOverlay() {
143 this.setData({
144 show: false
145 })
146 },
147 handleShowDoorTime() {
148 this.setData({
149 show: true
150 })
151 },
152 handleConfirm(event) {
153 const timestamp = event.detail
154 const date = new Date(timestamp);
155 const year = date.getFullYear();
156 const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要+1
157 const day = date.getDate().toString().padStart(2, '0');
158 const hours = date.getHours().toString().padStart(2, '0');
159 const minutes = date.getMinutes().toString().padStart(2, '0');
160 const doortime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
161 this.setData({
162 show: false,
163 DoorTime: doortime
164 })
165 },
166 handleCancel() {
167 console.log('点击取消了!');
168 this.setData({
169 show: false,
170 })
171 },
172 handelAddr() {
173 wx.navigateTo({
174 url: '/pages/addr/addr',
175 })
176 },
177 onShow() {
178 this.setData({
179 addr_id: app.globalData.addr_id,
180 addr_name: app.globalData.addr_name,
181 addr_mobile: app.globalData.addr_mobile,
182 addr_province: app.globalData.addr_province,
183 addr_city: app.globalData.addr_city,
184 addr_detail: app.globalData.addr_detail,
185 addr_is_default: app.globalData.addr_is_default,
186 pet_id: app.globalData.pet_id,
187 pet_name: app.globalData.pet_name,
188 pet_gender: app.globalData.pet_gender,
189 pet_birthday: app.globalData.pet_birthday,
190 pet_character: app.globalData.pet_character,
191 pet_pet_type: app.globalData.pet_pet_type,
192 pet_variety: app.globalData.pet_variety,
193 pet_weight: app.globalData.pet_weight,
194 pet_icon: app.globalData.pet_icon
195 })
196 },
197 handleChangeAddr() {
198 wx.navigateTo({
199 url: '/pages/addr/addr',
200 })
201 },
202 handleToCommit() {
203 console.log(this.data.feeder_price)
204 if (this.data.DoorTime != '请选择' && this.data.addr_id && this.data.pet_id) {
205 wx.request({
206 url: settings.order,
207 method: 'POST',
208 data: {
209 customer: wx.getStorageSync('username'),
210 appointment_time: this.data.DoorTime,
211 address: this.data.addr_id,
212 feeder: this.data.feeder_id,
213 pet: this.data.pet_id,
214 remarks: this.data.remarks,
215 actual_payment: this.data.feeder_price // 这个之后付款了在写 现在是死数据
216 },
217 header: {
218 'Authorization': 'Bearer ' + wx.getStorageSync('token')
219 },
220 success: (res) => {
221 this.setData({
222 addr_id: '',
223 addr_name: '',
224 addr_mobile: '',
225 addr_province: '',
226 addr_city: '',
227 addr_detail: '',
228 addr_is_default: '',
229 feeder_price: '',
230 feeder_price: 0,
231 remarks: null,
232 pet_id: null,
233 pet_name: null,
234 pet_gender: null,
235 pet_birthday: null,
236 pet_character: null,
237 pet_pet_type: null,
238 pet_variety: null,
239 pet_weight: null,
240 pet_icon: null,
241 DoorTime:'请选择'
242 })
243 Toast.success(res.data.msg);
244 setTimeout(() => {
245 wx.switchTab({
246 url: '/pages/my/my',
247 });
248 }, 1000);
249 }
250 })
251 } else {
252 Toast.fail('请填写完全!');
253 }
254
255 },
256 handleChangePet() {
257 wx.navigateTo({
258 url: '/pages/animal/animal',
259 })
260 },
261 handelPet() {
262 wx.navigateTo({
263 url: '/pages/animal/animal',
264 })
265 },
266 onUnload() {
267 this.setData({
268 feeder_id: null,
269 show: false,
270 minDate: new Date().getTime(),
271 maxDate: null,
272 DoorTime: '请选择',
273 addr_id: null,
274 addr_name: null,
275 addr_mobile: null,
276 addr_province: null,
277 addr_city: null,
278 addr_detail: null,
279 addr_is_default: null,
280 minHour: 11, // 最小小时为11点
281 maxHour: 21, // 最大小时为21点
282 minMinute: 0, // 最小分钟
283 maxMinute: 59, // 最大分钟
284 feeder_price: null,
285 remarks: null,
286 pet_id: null,
287 pet_name: null,
288 pet_gender: null,
289 pet_birthday: null,
290 pet_character: null,
291 pet_pet_type: null,
292 pet_variety: null,
293 pet_weight: null,
294 pet_icon: null
295 })
296 app.globalData.addr_id = null
297 app.globalData.addr_name = null
298 app.globalData.addr_mobile = null
299 app.globalData.addr_province = null
300 app.globalData.addr_city = null
301 app.globalData.addr_detail = null
302 app.globalData.addr_is_default = null
303
304 app.globalData.pet_id = null
305 app.globalData.pet_name = null
306 app.globalData.pet_gender = null
307 app.globalData.pet_birthday = null
308 app.globalData.pet_character = null
309 app.globalData.pet_pet_type = null
310 app.globalData.pet_variety = null
311 app.globalData.pet_weight = null
312 app.globalData.pet_icon = null
313 },
314
315
316 })
317
318 ==============================================
319 wxss
320
321 /* pages/pet/reserve/reserve.wxss */
322 page{
323 background-color: #F7F7FA;
324 }
325 .addAddress{
326 display: flex;
327 justify-content: center;
328 align-content: center;
329 }
330
331 .bottom-btn{
332 display: flex;
333 margin-top: 40rpx;
334 align-content: center;
335 justify-content: center;
336 }
337 .addpetimage{
338 width: 150rpx;
339 height: 150rpx;
340 border-radius: 50%;
341 margin-bottom: 40rpx;
342 }
343 .addpetview{
344 display: flex;
345 justify-content: center;
346 align-content: center;
347 }
--------------------------------------------------------------------------------------------------------
1 recharge充值页面
2
3 ---------------------------------------------
4 wxml
5
6 <!-- pages/recharge/recharge.wxml -->
7 <!-- 充值页面 -->
8 <image src="/static/images/1.png" class="image1" style="width:750rpx"/>
9 <view>
10 <view>当前余额：{{balance}}</view>
11 <view class="recharge-buttons">
12 <button
13 wx:for="{{amounts}}"
14 wx:key="amount"
15 bindtap="recharge"
16 data-amount="{{item}}"
17 class="{{selectedAmount === item ? 'selected' : ''}}"
18 >充 {{item}}</button>
19 </view>
20 <button bindtap="confirmRecharge" class="confirm-btn">确定充值</button>
21 </view>
22
23 =========================================
24 js
25
26 // pages/recharge/recharge.js
27 import settings from '../../static/js/settings.js';
28
29 Page({
30 data: {
31 balance: 0, // 初始余额
32 amounts: [100, 200, 300, 400, 500],
33 selectedAmount: null, // 用于保存选中的充值金额
34 },
35 onl oad() {
36 // 加载时获取余额
37 this.getBalance();
38 },
39 getBalance() {
40 wx.request({
41 url: settings.get_balance,
42 method: 'GET',
43 header: {
44 'Authorization': 'Bearer ' + wx.getStorageSync('token')
45 },
46 success: (res) => {
47 if (res.data) {
48 this.setData({
49 balance: res.data.data,
50 });
51 } else {
52 wx.showToast({
53 title: '获取余额失败',
54 icon: 'none',
55 });
56 }
57 },
58 fail: (err) => {
59 wx.showToast({
60 title: '网络错误',
61 icon: 'none',
62 });
63 },
64 });
65 },
66 recharge(e) {
67 console.log(e);
68 this.setData({
69 selectedAmount: e.currentTarget.dataset.amount,
70 });
71 },
72 confirmRecharge() {
73 const amount = this.data.selectedAmount;
74 if (amount) {
75 wx.request({
76 url: settings.recharge_balance,
77 method: 'POST',
78 header: {
79 'Authorization': 'Bearer ' + wx.getStorageSync('token')
80 },
81 data: {
82 amount: amount,
83 },
84 success: (res) => {
85 if (res.data) {
86 this.setData({
87 balance: res.data.data,
88 });
89 wx.showToast({
90 title: '充值成功',
91 icon: 'success',
92 });
93 } else {
94 wx.showToast({
95 title: '充值失败',
96 icon: 'none',
97 });
98 }
99 },
100 fail: (err) => {
101 wx.showToast({
102 title: '网络错误',
103 icon: 'none',
104 });
105 },
106 });
107 } else {
108 wx.showToast({
109 title: '请选择充值金额',
110 icon: 'none',
111 });
112 }
113 },
114 });
115
116
117 ==========================================
118 wxss
119
120 /* pages/recharge/recharge.wxss */
121
122 .image1 {
123 height: 300rpx;
124 }
125
126 .recharge-buttons button {
127 margin-bottom: 10rpx;
128 margin-top: 20rpx;
129 }
130
131 .confirm-btn {
132 background-color: #8dd5fd;
133 margin-top: 80rpx;
134 width: 300rpx;
135 }
136
137 .selected {
138 background-color: #8dd5fd; /* 选中后的颜色 */
139 }
140
1 serve服务
2
3 ---------------------------------------------------------------
4 wxml
5
6 <!--pages/serve/serve.wxml-->
7 <view wx:if="{{index==0}}">
8 <image src="/static/images/chongwuweiyang.png" mode="" style="height: 300rpx; width: 750rpx;" />
9 </view>
10 <view wx:else>
11 <image src="/static/images/shangmenliugou.png" mode="" style="height: 300rpx; width: 750rpx;" />
12 </view>
13 <view>
14 <van-tabs active="{{ active }}" bind:change="onChange">
15 <van-tab title="宠物喂养"></van-tab>
16 <van-tab title="上门遛狗"></van-tab>
17 </van-tabs>
18 </view>
19 <view>
20 <map id="map" longitude="121.56871" latitude="31.098" scale="12" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" style="width:100%;height:300rpx;"></map>
21 </view>
22 <view class="container" >
23 <navigator url="/pages/pet/petfeeder/petfeeder">
24 <van-button round type="danger" custom-style="width:300rpx" bind:tap="handlechoose">选择喂养员</van-button>
25 </navigator>
26 <navigator url="/pages/pet/reserve/reserve">
27 <van-button round type="info" custom-style="width:300rpx"
28 bind:tap="handlechoose">直接下单</van-button>
29 </navigator>
30 </view>
31 <van-toast id="van-toast" />
32 <view>
33 <van-tabs active="{{ active1 }}">
34 <van-tab title="服务介绍">服务介绍</van-tab>
35 <van-tab title="服务记录">服务记录</van-tab>
36 <van-tab title="预约指引">预约指引</van-tab>
37 <van-tab title="常见问题">常见问题</van-tab>
38 </van-tabs>
39 </view>
40
41 ============================================
42 js
43
44 // pages/serve/serve.js
45 import Toast from '@vant/weapp/toast/toast';
46 Page({
47 data: {
48 active: 0,
49 index: 0,
50 active1: 0,
51 markers: [{
52 id: 0,
53 latitude: 31.098,
54 longitude: 121.56871,
55 width: 50,
56 height: 50
57 }],
58 polyline: [{
59 points: [{
60 longitude: 121.56871,
61 latitude: 31.098
62 }, {
63 longitude: 121.56871,
64 latitude: 31.098
65 }],
66 color: "#FF0000DD",
67 width: 2,
68 dottedLine: true
69 }],
70 username: ''
71 },
72 onl oad(options) {
73 this.setData({
74 username: wx.getStorageSync('username')
75 })
76 },
77 onChange(event) {
78 this.setData({
79 index: event.detail.index
80 })
81 },
82 markertap(e) {
83 wx.openLocation({
84 latitude: 23.099994,
85 longitude: 113.324520,
86 });
87 },
88 handlechoose() {
89 if (this.data.username == '') {
90 wx.redirectTo({
91 url: '/pages/loginpage/loginpage',
92 })
93 }
94 }
95
96 })
97
98 =================================================
99 wxss
100
101 /* pages/serve/serve.wxss */
102
103 .container{
104 display: flex;
105 justify-content: space-around;
106 align-content: center;
107 margin-top: 20rpx;
108 }
109
110
111 =================================================
112 json
113
114 {
115 "usingComponents": {},
116 "navigationBarTitleText":"宠物服务"
117 }
1 suggest 建议反馈
2
3 --------------------------------------------------------------------------------------
4 wxml
5
6 <!--pages/suggest/suggest.wxml-->
7 <!-- 建议页面 -->
8 <text class="title">建议反馈</text>
9 <view class="header">
10 <image class="avatar" src="/static/images/catkefu.png" mode="aspectFit"></image>
11 <image src="/static/images/chat.png" mode="aspectFit" class="avatar1"></image>
12 </view>
13
14
15 <view class="feedback-container">
16 <text class="feedback-title">反馈内容</text>
17 <view class="feedback-form">
18 <view class="textarea-wrapper">
19 <textarea class="input-area" placeholder="请填写您的问题描述~不少于10字哦～" maxlength="300" bindinput="bindInput" model:value="{{feedbackinput}}"></textarea>
20 <view class="counter">{{currentLength}}/300</view>
21 </view>
22 </view>
23 </view>
24
25 <!-- 图片提交 -->
26 <view class="btn-group">
27 <view class="btn">图片补充（最多4张）</view>
28
29 <block wx:if="{{imagefile}}">
30 <button class="camera" bindtap="chooseImage" style="background-image: url({{imagefile}});"></button>
31 </block>
32 <block wx:else>
33 <button class="camera" bindtap="chooseImage" style="background-image: url('/static/images/camera.png');"></button>
34 </block>
35
36 </view>
37 <!-- 提交按钮 -->
38 <button class="submit-btn" bindtap="submitFeedback">提交</button>
39
40 <van-toast id="van-toast" />
41
42 ========================================
43 js
44
45 import settings from "../../static/js/settings";
46 import Toast from '@vant/weapp/toast/toast';
47 Page({
48 data: {
49 fileList: [],
50 currentLength: 0,
51 feedbackinput: '',
52 imagefile: '', // "http://192.168.1.38:8000" + /media/pet_icon/716f48749ef.jpg
53 uploadname: '' // pet_icon/716f48749ef.jpg
54 },
55 chooseImage() {
56 var that = this;
57 wx.chooseMedia({
58 count: 1, // 最多可以选择的图片数量
59 sourceType: ['album'],
60 success: function (res) {
61 const imagefile = res.tempFiles[0].tempFilePath
62 that.setData({
63 imagefile: imagefile
64 })
65 console.log(that.data.imagefile)
66 }
67 });
68 },
69 submitFeedback() {
70 const that = this
71 wx.uploadFile({
72 url: settings.feedback,
73 filePath: that.data.imagefile,
74 name: 'file',
75 success(res) {
76 const data = JSON.parse(res.data)
77 that.setData({
78 imagefile: data.file_url,
79 uploadname: data.file_name
80 })
81 }
82 })
83 wx.request({
84 url: settings.feedback1,
85 method: 'POST',
86 data: {
87 content: this.data.feedbackinput,
88 image: this.data.uploadname
89 },
90 success: (res) => {
91 if (res.data.code == 100) {
92 Toast.success(res.data.msg);
93 setTimeout(() => {
94 wx.switchTab({
95 url: '/pages/my/my',
96 })
97 }, 2000);
98 }else{
99 Toast.fail('服务器异常!请联系管理员');
100 setTimeout(() => {
101 wx.switchTab({
102 url: '/pages/my/my',
103 })
104 }, 2000);
105 }
106 }
107 })
108 },
109
110
111
112
113
114 bindInput: function (e) {
115 this.setData({
116 feedbackinput: e.detail.value,
117 currentLength: e.detail.value.length
118 });
119 }
120
121 })
122
123 ===========================================
124 wxss
125
126 /* 标题样式 */
127 .title {
128 font-size: 36rpx;
129 font-weight: bold;
130 text-align: center;
131 display: flex;
132 justify-content: center;
133 }
134
135 /* 容器样式 */
136 .container {
137 display: flex;
138 flex-direction: column;
139 align-items: center;
140
141 padding: 20rpx;
142 background-color: #f2f2f2;
143 }
144
145 /* 头像样式 */
146 .avatar {
147 width: 200rpx;
148 height: 200rpx;
149 }
150
151 .avatar1 {
152 margin-top: -50rpx;
153 width: 450rpx;
154 height: 450rpx;
155 }
156
157 .header {
158 height: 400rpx;
159 width: 750rpx;
160 background: linear-gradient(to bottom, #a6dbfb, #add8e6);
161 }
162
163
164 /* 子文本样式 */
165 .sub-text {
166 font-size: 14px;
167 text-align: center;
168 margin-bottom: 5px;
169 }
170
171
172 /* 反馈表单样式 */
173 .feedback-container {
174 display: flex;
175 flex-direction: column;
176 align-items: flex-start;
177 padding: 10rpx;
178 border-radius: 20rpx ;
179 }
180
181 .feedback-title {
182 margin-bottom: 10rpx;
183 }
184
185 .feedback-form {
186 width: 100%;
187 }
188
189 .textarea-wrapper {
190 position: relative; /* 设置为相对定位容器 */
191 border: 1px solid #ccc;
192 border-radius: 0;
193 overflow: hidden;
194 }
195
196 .input-area {
197 width: 100%;
198 height: 100px;
199 border: 1px solid #ccc;
200 border-radius: 4px;
201 padding: 10px;
202 font-size: 14px;
203 resize: none;
204 }
205
206 .counter {
207 position: absolute; /* 绝对定位 */
208 bottom: 10px;
209 right: 10px;
210 margin-top: 10px;
211 font-size: 12px;
212 color: #999;
213 text-align: right;
214 pointer-events: none;
215 }
216
217 /* 按钮组样式 */
218 .btn-group {
219 display: flex;
220 flex-direction: column;
221 align-items: flex-start;
222 }
223
224 .btn {
225 padding: 8px 16px;
226 background-color:white;
227 font-size: 24rpx;
228 margin-bottom: 10rpx;
229 color:#7c7979;
230 }
231
232 van-uploader {
233 margin-top: 0;
234 }
235
236 /* 提交按钮样式 */
237 .submit-btn {
238 width: 700rpx;
239 padding: 10px 0;
240 background-color: #76c7fc;
241 color: #fff;
242 border-radius: 40rpx 40rpx 40rpx 40rpx;
243 font-size: 30rpx;
244 text-align: center;
245
246 }
247
248
249
250
251
252 .camera{
253 display: flex;
254 height: 200rpx;
255 width: 200rpx;
256 background-color: #F7F8FA;
257 margin-bottom: 20rpx;
258 margin-left: 40rpx;
259 justify-content: center;
260 align-items: center;
261 background-size: cover;
262 background-position: center;
263 }
1 user/register
2
3 ----------------------------------------------------------------------------------
4 wxml
5
6 <view class="container">
7 <view class="main">
8 <view class="icon-view">
9 <!-- 应用图标 -->
10 <image src="/static/images/catdog.png" class="app-icon"></image>
11 <text class="title" style="text-align: center;">动物王国</text>
12 <text class="title">ta只是你的一条宠物，但你却是ta的一生</text>
13 </view>
14 </view>
15 <van-field model:value="{{ mobile }}" label="手机号" type="username" placeholder="请输入手机号" clearable="{{ true }}" bind:blur="checkmobile" />
16
17 <van-toast id="van-toast" />
18 <van-field model:value="{{ password }}" center clearable label="密码" placeholder="请输入密码" use-button-slot type='password'>
19 </van-field>
20 <van-field model:value="{{ code }}" center clearable label="短信验证码" placeholder="请输入短信验证码" border="{{ false }}" use-button-slot>
21 <van-button slot="button" size="small" type="primary" disabled="{{btndis}}" bind:click="handleSendsms">
22 {{btnText}}
23 </van-button>
24 </van-field>
25
26 <van-button type="info" block="{{ true }}" bind:tap="handleReg">注册</van-button>
27 <van-toast id="van-toast" />
28 </view>
29
30 =================================================
31 js
32
33 // pages/user/register/register.js
34 import settings from '../../../static/js/settings.js'
35 import Toast from '@vant/weapp/toast/toast';
36 Page({
37 data: {
38 sms: '',
39 mobile: '',
40 password: '',
41 btndis: true,
42 code: '',
43 btnText: '发送验证码',
44
45 },
46 onl oad(options) {
47
48 },
49 checkmobile() {
50 wx.request({
51 url: settings.checkmobile + '?' + 'mobile=' + this.data.mobile,
52 method: 'GET',
53 success: (res) => {
54 if (res.data.code == 100) {
55 Toast.success('可以注册!')
56 this.setData({
57 btndis: false
58 })
59 } else {
60 Toast.fail(res.data.msg)
61 this.setData({
62 mobile: '',
63 btndis: true
64 })
65 }
66 }
67 })
68
69 },
70 handleSendsms() {
71 // 发送短信请求
72 wx.request({
73 url: settings.send_sms + '?' + 'mobile=' + this.data.mobile,
74 method: 'GET',
75 success: (res) => {
76 if (res.data.code == 100) {
77 Toast.success(res.data.msg);
78 this.startTimer(); // 启动倒计时
79 }
80 }
81 });
82 },
83 startTimer() {
84 // 禁用按钮并设置初始倒计时文本
85 this.setData({
86 btndis: true,
87 btnText: '60秒后重试'
88 });
89
90 let seconds = 60;
91 this.data.timer = setInterval(() => {
92 seconds--;
93 this.setData({
94 btnText: `${seconds}秒后重试`
95 });
96
97 if (seconds <= 0) {
98 clearInterval(this.data.timer);
99 this.setData({
100 btndis: false,
101 btnText: '发送验证码'
102 });
103 }
104 }, 1000);
105 },
106 onUnload() {
107 // 页面卸载时清除定时器
108 if (this.data.timer) {
109 clearInterval(this.data.timer);
110 }
111 },
112 handleReg(){
113 if(this.data.mobile && this.data.password && this.data.code){
114 wx.request({
115 url: settings.register,
116 method:'POST',
117 data:{
118 mobile:this.data.mobile,
119 password:this.data.password,
120 code:this.data.code
121 },
122 success:(res)=>{
123 if(res.data.code==100){
124 Toast.success(res.data.msg)
125 setTimeout(() => {
126 wx.redirectTo({
127 url: '/pages/loginpage/loginpage',
128 })
129 }, 2000);
130 }
131 }
132 })
133 }else{
134 Toast.fail('请填写完全!')
135 }
136 }
137 })
138
139 ===========================================
140 wxss
141
142 .container {
143 padding: 20rpx;
144
145 }
146 .main{
147 display: flex;
148 justify-content: center;
149 align-items: center;
150 }
151 .icon-view{
152 display: flex;
153 flex-direction: column;
154 margin-bottom: 50rpx;
155 }
156 .title {
157 font-size: 28rpx;
158 font-weight: bold;
159 color: #333333;
160 }
161 .app-icon {
162 width: 100rpx;
163 height: 100rpx;
164 margin: 40rpx auto 20rpx; /* 上边距为40rpx，下边距为20rpx，左右居中 */
165 }
1 updateuserinfo 添加宠物页面
2
3 --------------------------------------------------------------------------------
4 wxml
5
6 <view>
7 <text>头像</text>
8 </view>
9 <!-- 头像点击选择按钮 -->
10
11 <button class="btn" open-type="chooseAvatar" bindchooseavatar="choosePhoto" style="background-image: url({{icon}});">
12 </button>
13
14
15
16 <view style="text-align: center;font-size: 30rpx;">
17 <text style="color: gray;">点击更换头像</text>
18 </view>
19 <van-divider />
20 <view>
21 <text class='jibenziliao'>基本资料</text>
22 </view>
23 <view>
24 <van-cell-group>
25 <van-field model:value="{{ user }}" is-link="{{ true }}" readonly="{{true}}" input-align="right" label="用户名" bind:tap="handleMTKUsername" custom-style="font-size: 30rpx;" />
26
27 <!-- 模态框 -->
28 <van-dialog use-slot title="修改昵称" show="{{ showmtk }}" show-cancel-button bind:cancel="onCancel" bind:confirm="onConfirm">
29 <van-field model:value="{{ user_input }}" placeholder="请输入用户名" border="{{ false }}" />
30 </van-dialog>
31
32 <van-field model:value="{{ mobile }}" readonly="{{true}}" input-align="right" label="手机号" custom-style="font-size: 30rpx;" />
33 <van-toast id="van-toast" />
34
35 <van-field model:value="{{ gender }}" is-link="{{ true }}" readonly="{{true}}" input-align="right" label="性别" bind:tap="handleAction" custom-style="font-size: 30rpx;" />
36 </van-cell-group>
37
38 <van-action-sheet show="{{ show }}" actions="{{ actions }}" cancel-text="取消" bind:close="onClose" bind:select="onSelect" bind:cancel="onClose" />
39
40 </view>
41
42 <view class="bottombtn">
43 <van-button round type="info" plain="{{true}}" custom-style="width:530rpx;color:grey;border:1px solid #F0F0F0;" bind:tap="handleLogout">退出登录</van-button>
44 </view>
45
46 ===========================================
47 js
48
49 // pages/user/updateuserinfo/updateuserinfo.js
50 import settings from '../../../static/js/settings.js'
51 import Toast from '@vant/weapp/toast/toast';
52 var app = getApp();
53 import Dialog from '@vant/weapp/dialog/dialog';
54 Page({
55 data: {
56 user: '',
57 user_input: '',
58 icon: '',
59 mobile: '',
60 gender: '',
61 show: false,
62 showmtk: false,
63 actions: [{
64 name: '男',
65 },
66 {
67 name: '女',
68 }
69 ],
70 },
71 onl oad(options) {
72 this.setData({
73 user: wx.getStorageSync('username'),
74 user_input: app.globalData.username,
75 icon: wx.getStorageSync('icon')
76 })
77 var token = 'Bearer ' + wx.getStorageSync('token')
78 wx.request({
79 url: settings.userinfo,
80 method: 'GET',
81 header: {
82 'Authorization': token
83 },
84 success: (res) => {
85 this.setData({
86 mobile: res.data.result.mobile,
87 gender: res.data.result.gender
88 })
89 // console.log(res.data)
90 }
91 })
92 },
93 handleMTKUsername() {
94 this.setData({
95 showmtk: true
96 })
97 },
98 onCancel() {
99 this.setData({
100 showmtk: false,
101 user_input: wx.getStorageSync('username')
102 });
103 },
104 // 修改用户名
105 onConfirm() {
106 this.setData({
107 user: this.data.user_input
108 })
109 var token = 'Bearer ' + wx.getStorageSync('token')
110 wx.request({
111 url: settings.userinfo,
112 method: 'PUT',
113 data: {
114 username: this.data.user,
115 gender: this.data.gender,
116 mobile: this.data.mobile
117 },
118 header: {
119 'Authorization': token
120 },
121 success: (res) => {
122 if (res.data.code==100){
123 Toast.success('修改成功!');
124 wx.setStorageSync('username', this.data.user_input)
125 app.globalData.username = this.data.user
126 }else{
127 Toast.fail(res.data.msg);
128 }
129
130 },
131
132 })
133 },
134 handleAction(){
135 this.setData({
136 show:true
137 })
138
139 },
140 onClose(){
141 this.setData({
142 show:false
143 })
144 },
145 onSelect(event){
146 this.setData({
147 gender:event.detail.name
148 })
149 this.onConfirm();
150 },
151 choosePhoto(event) {
152 // 头像临时路径
153 let path = event.detail.avatarUrl
154 // 设置Storage中
155 wx.setStorageSync('icon',path)
156 // 响应式
157 this.setData({
158 icon:path
159 })
160 // 上传文件
161 const that = this
162 wx.uploadFile({
163 url: settings.avatar,
164 filePath: this.data.icon,
165 name: 'avatar',
166 formData: {
167 'user': this.data.user
168 },
169 success (res){
170 let dict = JSON.parse(res.data)
171 that.setData({
172 icon:dict.path
173 })
174 // update流程应该是先上传头像，设置进Storage中，然后js直接setdata头像路径，显示在页面上
175 // my页面应该是load和show的时候从wx.Storage中读取头像，然后渲染到页面上的头像去，或者是返回直接刷新页面
176 wx.removeStorageSync('icon')
177 wx.setStorageSync('icon', dict.path)
178 Toast.success('上传成功!');
179 }
180 })
181 },
182 handleLogout(){
183 app.logoutUserInfo();
184 wx.reLaunch({
185 url: '/pages/home/home',
186 })
187 }
188 })
189
190 ==============================================
191 wxss
192
193 /* pages/user/updateuserinfo/updateuserinfo.wxss */
194 page {
195 margin: 0;
196 }
197
198 .btn {
199 background-size: cover;
200 background-position: center;
201 width: 90px;
202 height: 90px;
203 background-color: #f0f0f0;
204 border-radius: 50%;
205 border: 1px solid #ccc; /* 添加边框 */
206 }
207
208 .photo {
209 flex-grow: 1;
210 height: 60px;
211 object-fit: cover;
212 }
213
214 .jibenziliao{
215 margin-left: 35rpx;
216 margin-bottom: 35rpx;
217 }
218
219 .bottombtn{
220 position: fixed; /* 固定定位 */
221 bottom: 30px; /* 距离底部20像素 */
222 left: 50%; /* 水平居中 */
223 transform: translateX(-50%); /* 使按钮水平居中 */
224 }
225
226
227 ==============================================
228 json
229
230 {
231 "usingComponents": {},
232 "navigationBarTitleText":"个人信息"
233 }
1 settings
2
3 const BASE_URL = 'http://127.0.0.1:8000/api/v1/'
4 // const BASE_URL = 'http://192.168.1.222:8000/api/v1/'
5
6
7 export default {
8 banner: BASE_URL + 'home/banner/',
9 mul_login: BASE_URL + 'user/mul_login/multiple_login/',
10 check_msg: BASE_URL + 'user/check_msg/',
11 send_msg: BASE_URL + 'user/send_msg/',
12 pet_feeder: BASE_URL + 'user/pet_feeder/',
13 pet_feeder_filter: BASE_URL + 'user/pet_feeder_filter/',
14 message: BASE_URL + 'user/message/',
15 avatar: BASE_URL + 'user/avatar/',
16 userinfo: BASE_URL + 'user/userinfo/',
17 usermsglist: BASE_URL + 'user/usermsglist/',
18 edit_userinfo: BASE_URL + 'user/edit_userinfo/',
19 all_addr:BASE_URL+'user/all_addr/',
20 addr:BASE_URL+'user/addr/',
21 regfeeder:BASE_URL+'user/regfeeder/',
22 editaddr:BASE_URL+'user/all_addr/',
23 bindpet:BASE_URL+'pet/bindpet/',
24 order:BASE_URL+'order/order/',
25 petavatar:BASE_URL+'pet/petavatar/',
26 userpet:BASE_URL+'pet/petinfo/user_pet/',
27 register:BASE_URL + 'user/register/',
28 checkmobile:BASE_URL + 'user/mobile/check_mobile',
29 send_sms:BASE_URL + 'user/mobile/send_sms',
30 review:BASE_URL + 'order/review',
31 useroder:BASE_URL + 'order/userorder/',
32 daifukuan:BASE_URL + 'order/userorder/daifukuan/',
33 daijiedan:BASE_URL + 'order/userorder/daijiedan/',
34 daishangmen:BASE_URL + 'order/userorder/daishangmen/',
35 jinxingzhong:BASE_URL + 'order/userorder/jinxingzhong/',
36 yiwancheng:BASE_URL + 'order/userorder/yiwancheng/',
37 feedback:BASE_URL+'user/feedback/',
38 feedback1:BASE_URL+'user/feedback/feedback/',
39 get_balance:BASE_URL+'user/recharge/get_balance/',
40 recharge_balance:BASE_URL+'user/recharge/recharge_balance/',
41 order_pay : BASE_URL + 'order/order/pay/'
42 }
1 总的app.js
2
3 // app.js
4 App({
5 globalData: {
6 username:'',
7 icon:'',
8 token:'',
9 addr_id:null,
10 addr_name:null,
11 addr_mobile:null,
12 addr_province:null,
13 addr_city:null,
14 addr_detail:null,
15 addr_is_default:null,
16 pet_id:null,
17 pet_name:null,
18 pet_gender:null,
19 pet_birthday:null,
20 pet_character:null,
21 pet_pet_type:null,
22 pet_variety:null,
23 pet_weight:null,
24 pet_icon:null
25 },
26 initUserInfo(username, icon, token){
27 this.globalData.username = username
28 this.globalData.icon = icon
29 this.globalData.token = token
30 wx.setStorageSync('token',token)
31 wx.setStorageSync('username',username)
32 wx.setStorageSync('icon',icon)
33 },
34 logoutUserInfo: function () {
35 wx.removeStorageSync('token');
36 wx.removeStorageSync('username');
37 wx.removeStorageSync('icon');
38 wx.removeStorageSync('feeder_name');
39 this.globalData.token = '';
40 this.globalData.username = '';
41 this.globalData.icon = '';
42 this.globalData.feeder_name = '';
43 },
44 onLaunch() {
45 var token = wx.getStorageSync('token')
46 var username = wx.getStorageSync('username')
47 var icon = wx.getStorageSync('icon')
48 this.globalData.username = username
49 this.globalData.icon = icon
50 this.globalData.token = token
51 },
52 getAddr(addr){
53 this.globalData.addr_id=addr.id
54 this.globalData.addr_name=addr.name
55 this.globalData.addr_mobile=addr.mobile
56 this.globalData.addr_province=addr.province
57 this.globalData.addr_city=addr.city
58 this.globalData.addr_detail=addr.detail
59 this.globalData.addr_is_default=addr.is_default
60 },
61 getPet(pet){
62 this.globalData.pet_id=pet.id
63 this.globalData.pet_name=pet.name
64 this.globalData.pet_gender=pet.gender
65 this.globalData.pet_icon=pet.icon
66 this.globalData.pet_birthday=pet.birthday
67 this.globalData.pet_character=pet.character
68 this.globalData.pet_pet_type=pet.pet_type
69 this.globalData.pet_variety=pet.variety
70 this.globalData.pet_weight=pet.weight
71 },
72 })
1 总的app.json
2
3 {
4 "entryPagePath": "pages/my/my",
5 "pages": [
6 "pages/home/home",
7 "pages/serve/serve",
8 "pages/msg/msg",
9 "pages/my/my",
10 "pages/other/other",
11 "pages/loginpage/loginpage",
12 "pages/login/login",
13 "pages/order/order",
14 "pages/animal/animal",
15 "pages/addanimal/addanimal",
16 "pages/adopt/adopt",
17 "pages/suggest/suggest",
18 "pages/collect/collect",
19 "pages/addr/addr",
20 "pages/agreement/agreement",
21 "pages/joins/joins",
22 "pages/help/help",
23 "pages/inform/inform",
24 "pages/discounts/discounts",
25 "pages/binding/binding",
26 "pages/pet/petfeeder/petfeeder",
27 "pages/pet/feederdetail/feederdetail",
28 "pages/pet/chat/chat",
29 "pages/user/updateuserinfo/updateuserinfo",
30 "pages/user/register/register",
31 "pages/addrto/addrto",
32 "pages/pet/regfeeder/regfeeder",
33 "pages/editaddr/editaddr",
34 "pages/editpet/editpet",
35 "pages/pet/reserve/reserve",
36 "pages/subscription/subscription",
37 "pages/recharge/recharge"
38 ],
39 "window": {
40 "navigationBarBackgroundColor": "#ffffff",
41 "navigationBarTextStyle": "black",
42 "navigationBarTitleText": "test",
43 "backgroundColor": "#eeeeee",
44 "backgroundTextStyle": "light"
45 },
46 "tabBar": {
47 "selectedColor": "#b4282d",
48 "position": "bottom",
49 "list": [{
50 "pagePath": "pages/home/home",
51 "text": "首页",
52 "iconPath": "/static/images/home.png",
53 "selectedIconPath": "/static/images/home.png"
54 },
55 {
56 "pagePath": "pages/serve/serve",
57 "text": "服务",
58 "iconPath": "/static/images/pet.png",
59 "selectedIconPath": "/static/images/pet.png"
60 },
61 {
62 "pagePath": "pages/msg/msg",
63 "text": "消息",
64 "iconPath": "/static/images/message.png",
65 "selectedIconPath": "/static/images/message.png"
66 },
67 {
68 "pagePath": "pages/my/my",
69 "text": "我的",
70 "iconPath": "/static/images/wode.png",
71 "selectedIconPath": "/static/images/wode.png"
72 }
73 ]
74 },
75 "sitemapLocation": "sitemap.json",
76 "lazyCodeLoading": "requiredComponents",
77 "usingComponents": {
78 "van-button": "@vant/weapp/button/index",
79 "van-grid": "@vant/weapp/grid/index",
80 "van-grid-item": "@vant/weapp/grid-item/index",
81 "van-calendar": "@vant/weapp/calendar/index",
82 "van-cell": "@vant/weapp/cell/index",
83 "van-cell-group": "@vant/weapp/cell-group/index",
84 "van-radio": "@vant/weapp/radio/index",
85 "van-radio-group": "@vant/weapp/radio-group/index",
86 "van-card": "@vant/weapp/card/index",
87 "van-divider": "@vant/weapp/divider/index",
88 "van-toast": "@vant/weapp/toast/index",
89 "van-field": "@vant/weapp/field/index",
90 "van-empty": "@vant/weapp/empty/index",
91 "van-image": "@vant/weapp/image/index",
92 "van-dialog": "@vant/weapp/dialog/index",
93 "van-action-sheet": "@vant/weapp/action-sheet/index",
94 "van-checkbox": "@vant/weapp/checkbox/index",
95 "van-checkbox-group": "@vant/weapp/checkbox-group/index",
96 "van-area": "@vant/weapp/area/index",
97 "van-cascader": "@vant/weapp/cascader/index",
98 "van-popup": "@vant/weapp/popup/index",
99 "van-loading": "@vant/weapp/loading/index",
100 "van-overlay": "@vant/weapp/overlay/index",
101 "van-datetime-picker": "@vant/weapp/datetime-picker/index",
102 "van-uploader": "@vant/weapp/uploader/index",
103 "van-tab": "@vant/weapp/tab/index",
104 "van-tabs": "@vant/weapp/tabs/index"
105 }
106
107 }
总的app.wxss @import "/static/css/iconfront.wxss";
1 package-lock.json
2
3
4 {
5 "name": "puddingpet_front",
6 "version": "1.0.0",
7 "lockfileVersion": 3,
8 "requires": true,
9 "packages": {
10 "": {
11 "name": "puddingpet_front",
12 "version": "1.0.0",
13 "license": "ISC",
14 "dependencies": {
15 "@vant/area-data": "^1.5.1",
16 "@vant/weapp": "^1.11.6",
17 "add": "^2.0.6",
18 "yarn": "^1.22.22"
19 }
20 },
21 "node_modules/@vant/area-data": {
22 "version": "1.5.1",
23 "resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.1.tgz",
24 "integrity": "sha512-gR5TPEzTbxN1cTK1aDhCoyikSCLX7DAacxyXoKyI4SAsYYTZrDl/nLgQFIm9vLsvWzlPIda8xV8/U3x7M9k6ww=="
25 },
26 "node_modules/@vant/weapp": {
27 "version": "1.11.6",
28 "resolved": "https://registry.npmmirror.com/@vant/weapp/-/weapp-1.11.6.tgz",
29 "integrity": "sha512-a3heReWYT2gNdsyj6x1hBwsM8V8NrjcPAmle86NH2CD2V/i/h0le75piW6KntSfOPCwekVWMBKhysNrBpJeKdw=="
30 },
31 "node_modules/add": {
32 "version": "2.0.6",
33 "resolved": "https://registry.npmmirror.com/add/-/add-2.0.6.tgz",
34 "integrity": "sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q=="
35 },
36 "node_modules/yarn": {
37 "version": "1.22.22",
38 "resolved": "https://registry.npmmirror.com/yarn/-/yarn-1.22.22.tgz",
39 "integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==",
40 "hasInstallScript": true,
41 "bin": {
42 "yarn": "bin/yarn.js",
43 "yarnpkg": "bin/yarn.js"
44 },
45 "engines": {
46 "node": ">=4.0.0"
47 }
48 }
49 }
50 }
1 package.json
2
3 {
4 "name": "puddingpet_front",
5 "version": "1.0.0",
6 "description": "",
7 "main": "app.js",
8 "scripts": {
9 "test": "echo \"Error: no test specified\" && exit 1"
10 },
11 "keywords": [],
12 "author": "",
13 "license": "ISC",
14 "dependencies": {
15 "@vant/area-data": "^1.5.1",
16 "@vant/weapp": "^1.11.6",
17 "add": "^2.0.6",
18 "yarn": "^1.22.22"
19 }
20 }
1 yarn.lock 2 3 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 4 # yarn lockfile v1 5 6 7 "@vant/area-data@^1.5.1": 8 version "1.5.1" 9 resolved "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.1.tgz" 10 integrity sha512-gR5TPEzTbxN1cTK1aDhCoyikSCLX7DAacxyXoKyI4SAsYYTZrDl/nLgQFIm9vLsvWzlPIda8xV8/U3x7M9k6ww== 11 12 "@vant/weapp@^1.11.6": 13 version "1.11.6" 14 resolved "https://registry.npmmirror.com/@vant/weapp/-/weapp-1.11.6.tgz" 15 integrity sha512-a3heReWYT2gNdsyj6x1hBwsM8V8NrjcPAmle86NH2CD2V/i/h0le75piW6KntSfOPCwekVWMBKhysNrBpJeKdw== 16 17 add@^2.0.6: 18 version "2.0.6" 19 resolved "https://registry.npmmirror.com/add/-/add-2.0.6.tgz" 20 integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q== 21 22 yarn@^1.22.22: 23 version "1.22.22" 24 resolved "https://registry.npmmirror.com/yarn/-/yarn-1.22.22.tgz" 25 integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
标签：flex,res,pet,微信,data,期终,margin,---------,wx From： https://www.cnblogs.com/liuliu1/p/18242623