From 1fb1e9e3321102d23997551be7a5ad7d91b74015 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期四, 17 七月 2025 15:28:25 +0800
Subject: [PATCH] 对接口，新建富文本页面
---
small-program/pages/using-workers/using-workers.vue | 230 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 208 insertions(+), 22 deletions(-)
diff --git a/small-program/pages/using-workers/using-workers.vue b/small-program/pages/using-workers/using-workers.vue
index 7eab78e..451b52a 100644
--- a/small-program/pages/using-workers/using-workers.vue
+++ b/small-program/pages/using-workers/using-workers.vue
@@ -6,24 +6,24 @@
<view class="list-item-label-x"></view>
<text>鏃堕棿鍦扮偣</text>
</view>
- <view class="list-item-row">
+ <view class="list-item-row" @click="show = true">
<view class="list-item-row-label">鐢ㄥ伐鏃堕棿<b>*</b></view>
<view class="list-item-row-val">
- <text>璇烽�夋嫨</text>
+ <text>{{form.startDate ? form.startDate + ' 鑷� ' + form.endDate + ' (' + form.days + '澶�) ' : '璇烽�夋嫨'}}</text>
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
</view>
</view>
- <view class="list-item-row">
+ <view class="list-item-row" @click="selectAddress()">
<view class="list-item-row-label">鐢ㄥ伐鍦扮偣<b>*</b></view>
<view class="list-item-row-val">
- <text>璇烽�夋嫨</text>
+ <text>{{form.location ? form.location : '璇烽�夋嫨'}}</text>
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
</view>
</view>
<view class="list-item-row">
<view class="list-item-row-label">鍦扮偣鎻忚堪</view>
<view class="list-item-row-val">
- <input type="text" placeholder="璇疯緭鍏�" />
+ <input type="text" v-model="form.locationRemark" placeholder="璇疯緭鍏�" />
</view>
</view>
</view>
@@ -32,41 +32,42 @@
<view class="list-item-label-x"></view>
<text>闇�姹�</text>
</view>
- <view class="list-item-row">
+ <view class="list-item-row" @click="show1 = true">
<view class="list-item-row-label">閲囨憳鍝佺<b>*</b></view>
<view class="list-item-row-val">
- <text>璇烽�夋嫨</text>
+ <text>{{form.categoryName ? form.categoryName : '璇烽�夋嫨'}}</text>
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
</view>
</view>
<view class="list-item-row">
<view class="list-item-row-label">閲囨憳閲嶉噺<b>*</b></view>
<view class="list-item-row-val">
- <text>璇烽�夋嫨</text>
- <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
+ <input type="number" v-model="form.priceNum1" @blur="getPrice" placeholder="璇疯緭鍏�" />
+ <text>鏂�</text>
</view>
</view>
- <view class="list-item-row">
+ <view class="list-item-row" v-if="viewStatus">
<view class="list-item-row-label">闇�姹傝ˉ鍏�</view>
<view class="list-item-row-val">
- <textarea cols="30" rows="10" placeholder="璇疯緭鍏�" maxlength="200"></textarea>
+ <textarea v-model="form.supplement" cols="30" rows="10" placeholder="璇疯緭鍏�" maxlength="200"></textarea>
</view>
</view>
- <view class="list-item-row">
+ <view class="list-item-row" v-if="viewStatus">
<view class="list-item-row-label">鍥剧墖</view>
<view class="list-item-row-upload">
- <view class="upload-item">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <view class="upload-item" v-for="(item, index) in form.multifileList" :key="index">
+ <image :src="item.url" mode="widthFix"></image>
+ <image class="upload-item-dele" @click="form.multifileList.splice(index, 1)" src="/static/icon/ic_delete1@2x.png" mode="widthFix"></image>
</view>
- <view class="upload-item">
+ <view class="upload-item" @click="uploadImg">
<u-icon name="plus" color="#999999" size="24"></u-icon>
<text>鐐瑰嚮涓婁紶</text>
</view>
</view>
</view>
- <view class="list-item-zk">
- <text>琛ュ厖闇�姹�</text>
- <u-icon name="arrow-down" color="#00BC12" size="16"></u-icon>
+ <view class="list-item-zk" @click="viewStatus = !viewStatus">
+ <text>{{viewStatus ? '鏀惰捣' : '琛ュ厖闇�姹�'}}</text>
+ <u-icon :name="viewStatus ? 'arrow-up' : 'arrow-down'" color="#00BC12" size="16"></u-icon>
</view>
</view>
<view class="list-item">
@@ -77,8 +78,27 @@
<view class="list-item-row">
<view class="list-item-row-label">璐圭敤鏍囧噯<b>*</b></view>
<view class="list-item-row-val">
- <input type="text" placeholder="璇疯緭鍏�" />
+ <input v-model="form.price" type="number" @blur="getPrice" placeholder="璇疯緭鍏�" />
<text>鍏�/鏂�</text>
+ </view>
+ </view>
+ </view>
+ <view class="list-item">
+ <view class="list-item-label">
+ <view class="list-item-label-x"></view>
+ <text>鑱旂郴浜轰俊鎭�</text>
+ <text class="list-item-label-info">榛樿鍙戝崟鏂硅仈绯绘柟寮忥紝鍙慨鏀硅仈绯讳汉</text>
+ </view>
+ <view class="list-item-row">
+ <view class="list-item-row-label">鑱旂郴浜哄鍚�</view>
+ <view class="list-item-row-val">
+ <input type="text" v-model="form.linkName" placeholder="璇疯ˉ鍏�" />
+ </view>
+ </view>
+ <view class="list-item-row">
+ <view class="list-item-row-label">鑱旂郴鐢佃瘽<b>*</b></view>
+ <view class="list-item-row-val">
+ <input type="text" v-model="form.linkPhone" maxlength="11" placeholder="璇疯ˉ鍏�" />
</view>
</view>
</view>
@@ -88,27 +108,178 @@
<view class="footer-price">
<view class="footer-price-info">棰勪及鎬昏垂鐢�</view>
<view class="footer-price-num">
- <text>0</text>
+ <text>{{totalPrice}}</text>
<text>鍏�</text>
</view>
</view>
<view class="footer-bottom">
- <div class="footer-bottom-btn">
+ <div class="footer-bottom-btn" @click="submit">
<text>绔嬪嵆涓嬪崟</text>
<text>锛堟湇鍔″畬鎴愬悗浠樻锛�</text>
</div>
</view>
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
</view>
+
+ <!-- 閫夋嫨鏃ユ湡鑼冨洿 -->
+ <u-calendar
+ :show="show"
+ color="#00BC12"
+ mode="range"
+ @close="show = false"
+ @confirm="confirmDate" />
+
+ <!-- 閫夋嫨鍝佺 -->
+ <u-picker
+ :show="show1"
+ :immediateChange="true"
+ :columns="cateList"
+ confirmColor="#00BC12"
+ @confirm="confirmCategary"
+ @cancel="show1 = false"
+ keyName="name" />
</view>
</template>
<script>
+ import { mapState } from 'vuex'
export default {
+ computed: {
+ ...mapState(['userInfo']),
+ totalPrice() {
+ return this.form.estimatedAccount / 100
+ }
+ },
data() {
return {
-
+ show: false,
+ show1: false,
+ form: {
+ days: '',
+ startDate: '',
+ endDate: '',
+ lat: '',
+ lgt: '',
+ location: '',
+ workType: 0,
+ locationRemark: '',
+ categoryId: '',
+ categoryName: '',
+ priceNum1: '',
+ price: '',
+ supplement: '',
+ multifileList: [],
+ linkName: '',
+ linkPhone: '',
+ priceUnit: '鏂�',
+ estimatedAccount: '',
+ type: 0
+ },
+ cateList: [],
+ viewStatus: false
};
+ },
+ onLoad(option) {
+ this.form.linkPhone = this.userInfo.telephone
+ this.form.days = option.days
+ this.form.startDate = option.startDate
+ this.form.endDate = option.endDate
+ this.form.lat = option.latitude
+ this.form.lgt = option.longitude
+ this.form.location = option.address
+ this.form.workType = option.workType
+ this.getCateList()
+ },
+ methods: {
+ // 鎻愪氦璁㈠崟
+ submit() {
+ if (!this.form.categoryId) {
+ return uni.showToast({ title: '璇烽�夋嫨閲囨憳鍝佺', icon: 'none' })
+ }
+ if (!this.form.priceNum1) {
+ return uni.showToast({ title: '璇疯緭鍏ラ噰鎽橀噸閲�', icon: 'none' })
+ }
+ if (!this.form.price) {
+ return uni.showToast({ title: '璇疯緭鍏ヨ垂鐢ㄦ爣鍑�', icon: 'none' })
+ }
+ if (!this.form.linkPhone) {
+ return uni.showToast({ title: '璇疯緭鍏ヨ仈绯荤數璇�', icon: 'none' })
+ }
+ this.$u.api.release({ ...this.form, price: Number(this.form.price) * 100 })
+ .then(res => {
+ if (res.code == 200) {
+ uni.navigateTo({
+ url: `/pages/success/success?orderId=${res.data}`
+ })
+ }
+ })
+ },
+ // 璁＄畻閲戦
+ getPrice() {
+ if (this.form.price && this.form.priceNum1) {
+ this.$u.api.getTotal({
+ price: Number(this.form.price) * 100,
+ priceUnit: this.form.priceUnit,
+ priceNum1: this.form.priceNum1,
+ priceNum2: 1,
+ type: this.form.type,
+ workType: this.form.workType
+ }).then(res => {
+ this.form.estimatedAccount = res.data
+ })
+ }
+ },
+ confirmDate(e) {
+ this.form.startDate = e[0]
+ this.form.endDate = e[e.length - 1]
+ this.form.days = e.length;
+ this.show = false
+ },
+ selectAddress() {
+ uni.chooseLocation({
+ success: (res) => {
+ this.form.lat = res.latitude
+ this.form.lgt = res.longitude
+ this.form.address = res.address
+ }
+ });
+ },
+ confirmCategary(e) {
+ this.form.categoryId = e.value[0].id
+ this.form.categoryName = e.value[0].name
+ this.show1 = false
+ },
+ getCateList() {
+ this.$u.api.getCategoryList({
+ type: 0
+ }).then(res => {
+ this.cateList = [res.data]
+ })
+ },
+ uploadImg() {
+ uni.chooseImage({
+ success: (chooseImageRes) => {
+ const tempFilePaths = chooseImageRes.tempFilePaths;
+ uni.uploadFile({
+ url: this.$baseUrl + '/web/public/upload',
+ filePath: tempFilePaths[0],
+ name: 'file',
+ formData: {
+ 'folder': 'orders'
+ },
+ success: (uploadFileRes) => {
+ const res = JSON.parse(uploadFileRes.data)
+ this.form.multifileList.push({
+ fileurl: res.data.imgaddr,
+ name: res.data.originname,
+ url: res.data.url,
+ type: 0
+ })
+ }
+ });
+ }
+ });
+ }
}
}
</script>
@@ -233,6 +404,12 @@
font-weight: 600;
font-size: 32rpx;
color: #222222;
+ }
+ .list-item-label-info {
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #999999;
+ margin-left: 26rpx;
}
.list-item-label-x {
width: 6rpx;
@@ -396,6 +573,7 @@
border-radius: 8rpx;
margin-right: 20rpx;
border: 2rpx solid #EEEEEE;
+ position: relative;
&:last-child {
margin: 0 !important;
}
@@ -408,6 +586,14 @@
color: #666666;
margin-top: 16rpx;
}
+ .upload-item-dele {
+ position: absolute;
+ top: -20rpx;
+ right: -20rpx;
+ width: 40rpx;
+ height: 40rpx;
+ z-index: 9;
+ }
}
}
.list-item-row-val {
--
Gitblit v1.9.3