no message

src/packageMine/pages/workerEnter.vue

@@ -1,400 +1,599 @@
 <template>
-	<!-- #ifdef H5 -->
-	<zj-page-layout :hasFooter="true">
-		<template slot="header">
-			<view class="mode">
-				<view class="content">
-					<h3>联系信息</h3>
-					<view class="item flex">
-						<view class="required">入驻网点</view>
-						<view class="flex" style="flex: 1;">
-							<input type="text" style="pointer-events: none;" readonly="readonly"
-								:value="websitName" placeholder="请选择入驻网点">
-							<image src="/static/mine/workerEnter/right.png" mode="aspectFill"></image>
-						</view>
-					</view>
-					<view class="item flex">
-						<view class="required">姓名</view>
-						<view class="flex" style="flex: 1;">
-							<input v-model="name" type="text" placeholder="请输入姓名">
-						</view>
-					</view>
-					<view class="item flex">
-						<view class="">银行卡号</view>
-						<view class="flex" style="flex: 1;">
-							<input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号">
-						</view>
-					</view>
-					<view class="item flex">
-						<view class="required">身份证号</view>
-						<view class="flex" style="flex: 1;">
-							<input v-model="idcard" maxlength="18" type="text" placeholder="请输入身份证号">
-						</view>
-					</view>
-					<view class="item">
-						<view class="imgs" @tap="toChooseImg('idCardImg')">
-							<image class="del" @tap.stop="idCardImg = ''" v-show="idCardImg"
-								src="/static/mine/workerEnter/del.png" mode="aspectFill"></image>
-							<image id="img" v-if="idCardImg" :src="idCardImg" mode="aspectFill"
-								@tap.stop="previewImage(idCardImg)"></image>
-							<view v-else class="addimg">
-								<image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
-							</view>
-							<view class="text required">身份证正面</view>
-						</view>
-					</view>
-					<view class="item" v-for="(item,index) in imgList" :key="index">
-						<view class="imgs" @tap="toChooseImg1(index)" >
-							<image class="del" @tap.stop="item.imgUrl = ''" v-show="item.imgUrl"
-								src="/static/mine/workerEnter/del.png" mode="aspectFill"></image>
-							<image id="img" v-if="item.imgUrl" :src="item.imgUrl" mode="aspectFill"
-								@tap.stop="previewImage(item.imgUrl)"></image>
-							<view v-else class="addimg">
-								<image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
-							</view>
-							<view class="text required">{{item.dictValue}}</view>
-						</view>
-					</view>
-					<view class="zhu">注意：支持PNG、JPG、JPEG，每张大小不可超过1M</view>
-				</view>
-			</view>
-			<zjDialogPicker ref="websitDialog" :isShow="isShowWebsitDialog" :multiple="false" :styleType="2"
-				:title="'入驻网点'" :list="websitList" :keyName="'name'" @search=""
-				@cancel="isShowWebsitDialog = false" @confirm="confirmWebsitDialog">
-			</zjDialogPicker>
-		</template>
+  <zj-page-layout :hasFooter="true">
+    <template slot="header">
+      <view class="mode">
+        <view class="content">
+          <!-- ----------------------------------------------------------------- -->
+          <view class="mokuaikapian">
+            <view class="mokuaineirongquyu">
+              <h3>联系信息</h3>
+              <view class="item flex">
+                <view class="required">入驻网点</view>
+                <view class="flex" style="flex: 1">
+                  <input
+                    type="text"
+                    style="pointer-events: none"
+                    readonly="readonly"
+                    :value="websitName"
+                    placeholder="请选择入驻网点"
+                  />
+                  <image src="/static/mine/workerEnter/right.png" mode="aspectFill"></image>
+                </view>
+              </view>
+              <view class="item flex">
+                <view class="required">姓名</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="name" type="text" placeholder="请输入姓名" />
+                </view>
+              </view>
+              <view class="item flex">
+                <view class="">银行卡号</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号" />
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- ----------------------------------------------------------------- -->
+          <view class="mokuaikapian">
+            <view class="mokuaineirongquyu">
+              <h3>身份证信息</h3>
+              <view class="item">
+                <view class="imgs" @tap="toChooseImg('idCardImg')">
+                  <image
+                    class="del"
+                    @tap.stop="idCardImg = ''"
+                    v-show="idCardImg"
+                    src="/static/mine/workerEnter/del.png"
+                    mode="aspectFill"
+                  ></image>
+                  <image
+                    id="img"
+                    v-if="idCardImg"
+                    :src="idCardImg"
+                    mode="aspectFill"
+                    @tap.stop="previewImage(idCardImg)"
+                  ></image>
+                  <view v-else class="addimg">
+                    <image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
+                  </view>
+                  <view class="text required">身份证正面</view>
+                </view>
+              </view>
+              <view class="item flex">
+                <view class="required">身份证号</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="idcard" maxlength="18" type="text" placeholder="请输入身份证号" />
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- ----------------------------------------------------------------- -->
+          <view class="mokuaikapian">
+            <view class="mokuaineirongquyu">
+              <h3>高空证信息</h3>
+              <view class="item" v-for="(item, index) in imgList" :key="index">
+                <view class="imgs" @tap="toChooseImg1(index)">
+                  <image
+                    class="del"
+                    @tap.stop="item.imgUrl = ''"
+                    v-show="item.imgUrl"
+                    src="/static/mine/workerEnter/del.png"
+                    mode="aspectFill"
+                  ></image>
+                  <image
+                    id="img"
+                    v-if="item.imgUrl"
+                    :src="item.imgUrl"
+                    mode="aspectFill"
+                    @tap.stop="previewImage(item.imgUrl)"
+                  ></image>
+                  <view v-else class="addimg">
+                    <image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
+                  </view>
+                  <view class="text required">{{ item.dictValue }}</view>
+                </view>
+              </view>
+              <view class="zhu">注意：支持PNG、JPG、JPEG，每张大小不可超过1M</view>
+            </view>
+          </view>
+          <!-- ----------------------------------------------------------------- -->
+          <view class="mokuaikapian">
+            <view class="mokuaineirongquyu">
+              <h3>意外险信息</h3>
+              <view class="item flex">
+                <view class="required">保险公司名称</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="name" type="text" placeholder="请输入姓名" />
+                </view>
+              </view>
+              <view class="item flex">
+                <view class="">保单名称</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号" />
+                </view>
+              </view>
+              <view class="item flex">
+                <view class="">保险单号</view>
+                <view class="flex" style="flex: 1">
+                  <input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号" />
+                </view>
+              </view>
+              <view class="mt30 image-container">
+                <view class="common-title">上传图片(最多3张)</view>
+                <view class="images">
+                  <block v-for="(item, index) in imageList" :key="index">
+                    <view class="img">
+                      <image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
+                      <text class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
+                    </view>
+                  </block>
+                  <view class="add" @tap="addImage" v-if="imageList.length < 3">
+                    <text class="iconfont icon-xiangji"></text>
+                    <text class="text">添加图片</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- ----------------------------------------------------------------- -->
+        </view>
+      </view>
+      <zjDialogPicker
+        ref="websitDialog"
+        :isShow="isShowWebsitDialog"
+        :multiple="false"
+        :styleType="2"
+        :title="'入驻网点'"
+        :list="websitList"
+        :keyName="'name'"
+        @cancel="isShowWebsitDialog = false"
+        @confirm="confirmWebsitDialog"
+      >
+      </zjDialogPicker>
+    </template>
 
-		<template slot="footer">
-			<view class="flex xieyi">
-				<image :src=" isChecked ? '/static/mine/workerEnter/them_check.png' : '/static/mine/workerEnter/gray_uncheck.png' "
-				mode="" @tap.stop="isChecked = !isChecked"></image>
-				<view class="">我已阅读并同意</view>
-				<view class="notification" @tap="navToPage('/packageMine/pages/agreement?type=3')">《服务协议》</view>
-			</view>
-			<view class="btn" @click="submit()">提交审核</view>
-		</template>
-	</zj-page-layout>
-	<!-- #endif -->
-
-	<!-- #ifndef H5 -->
-	<web-view :src="webViewHref(`/packageMine/pages/workerEnter`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
-	<!-- #endif -->
+    <template slot="footer">
+      <view class="flex xieyi">
+        <image
+          :src="isChecked ? '/static/mine/workerEnter/them_check.png' : '/static/mine/workerEnter/gray_uncheck.png'"
+          mode=""
+          @tap.stop="isChecked = !isChecked"
+        ></image>
+        <view class="">我已阅读并同意</view>
+        <view class="notification" @tap="navToPage('/packageMine/pages/agreement?type=3')">《服务协议》</view>
+      </view>
+      <view class="btn" @click="submit()">提交审核</view>
+    </template>
+  </zj-page-layout>
 </template>
 
 <script>
-	// #ifdef H5
-	import { uploadImgFull } from '@/common/utils/util.js';
-	import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";
-	import verify from '@/common/utils/verify.js';
-	export default {
-		components: {
-			zjDialogPicker
-		},
-		data() {
-			return {
-				isShowWebsitDialog: false,
-				isChecked: false,
-				websitList: [],
-				websitName: '',
-				websitId: '',
-				name: '',
-				bankAccount: '',
-				idcard: '',
-				idCardImg: '',
-				imageUrl: this.$imageUrl,
-				imgList: []
-			}
-		},
+import { uploadImgFull } from '@/common/utils/util.js'
+import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
+import verify from '@/common/utils/verify.js'
+export default {
+  components: {
+    zjDialogPicker
+  },
+  data() {
+    return {
+      isShowWebsitDialog: false,
+      isChecked: false,
+      websitList: [],
+      websitName: '',
+      websitId: '',
+      name: '',
+      bankAccount: '',
+      idcard: '',
+      idCardImg: '',
+      imageUrl: this.$imageUrl,
+      imgList: [],
+      imageList: [] //上传的文件数据
+    }
+  },
+
+  onLoad({ websitId, websitName }) {
+    if (websitId) {
+      this.websitId = websitId
+      this.websitName = websitName
+    }
+    this.getUser()
+    this.getImageList()
+  },
+  computed: {},
+
+  methods: {
+    // 添加图片
+    async addImage() {
+      uni.chooseImage({
+        count: 6 - this.imageList.length,
+        success: res => {
+          uni.showLoading()
+          res.tempFilePaths.forEach(async item => {
+            let data = await uploadImgFull(item)
+            this.imageList.push(data)
+          })
+          uni.hideLoading()
+        },
+        fail: err => {}
+      })
+    },
+
+    // 删除图片
+    delImage(index) {
+      this.imageList.splice(index, 1)
+    },
 
-		onLoad({websitId,websitName}) {
-			if(websitId){
-				this.websitId = websitId
-				this.websitName = websitName
-			}
-			this.getUser()
-			this.getImageList()
-		},
-		computed: {
+    //预览图片
+    prevImg(current) {
+      uni.previewImage({
+        current,
+        urls: this.imageList.map(item => {
+          return item.url
+        })
+      })
+    },
 
-		},
+    getWebsit() {
+      this.$api
+        .get('/user/apply/websit', {
+          pageNum: 1,
+          pageSize: -1,
+          status: 'ON'
+        })
+        .then(res => {
+          this.websitList = res.data
+        })
+    },
 
-		methods: {
-			getWebsit() {
-				this.$api.get('/user/apply/websit', {
-					pageNum: 1,
-					pageSize: -1,
-					status: 'ON'
-				}).then(res => {
-					this.websitList = res.data
-				})
-			},
-			
-			getImageList(){
-				this.$api.post('/pay/sysDict', {
-				  dictType: 'WORKER_IMG'
-				}).then(res => {
-					res.data.filter(item=>{
-						return item.imgUrl = ''
-					})
-					this.imgList = res.data
-					console.log(this.imgList,res.data)
-				})
-			},
-			
-			getUser(){
-				this.$api.get('/user/user/detail', {
-					userId: this.$store.state.user.userId,
-				}).then(res => {
-					this.idcard = res.data.idCard
-					this.idCardImg = res.data.idCardImg
-					// this.name = res.data.nickName
-				})
-			},
+    getImageList() {
+      this.$api
+        .post('/pay/sysDict', {
+          dictType: 'WORKER_IMG'
+        })
+        .then(res => {
+          res.data.filter(item => {
+            return (item.imgUrl = '')
+          })
+          this.imgList = res.data
+        })
+    },
 
-			openWebsit() {
-				this.isShowWebsitDialog = true
-			},
+    getUser() {
+      this.$api
+        .get('/user/user/detail', {
+          userId: this.$store.state.user.userId
+        })
+        .then(res => {
+          this.idcard = res.data.idCard
+          this.idCardImg = res.data.idCardImg
+          // this.name = res.data.nickName
+        })
+    },
 
-			confirmWebsitDialog(e) {
-				this.websitId = this.websitList[e[0]].websitId
-				this.websitName = this.websitList[e[0]].name
-				this.isShowWebsitDialog = false;
-			},
+    openWebsit() {
+      this.isShowWebsitDialog = true
+    },
 
-			// 选择图片
-			async toChooseImg(type) {
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					success: res => {
-						this.uploadImage(res.tempFilePaths[0], type);
-					},
-					fail: err => {
-						console.log(err);
-					}
-				})
-			},
+    confirmWebsitDialog(e) {
+      this.websitId = this.websitList[e[0]].websitId
+      this.websitName = this.websitList[e[0]].name
+      this.isShowWebsitDialog = false
+    },
 
-			// 上传文件
-			async uploadImage(file, type) {
-				let data = await uploadImgFull(file);
-				uni.hideLoading()
-				this[type] = data.url;
-			},
-			
-			async toChooseImg1(index){
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					success: res => {
-						this.uploadImage1(res.tempFilePaths[0],index);
-					},
-					fail: err => {
-						console.log(err);
-					}
-				})
-			},
-			
-			async uploadImage1(file, index) {
-				let data = await uploadImgFull(file);
-				uni.hideLoading()
-				this.imgList[index].imgUrl = data.url;
-			},
+    // 选择图片
+    async toChooseImg(type) {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        success: res => {
+          this.uploadImage(res.tempFilePaths[0], type)
+        },
+        fail: err => {
+          console.log(err)
+        }
+      })
+    },
 
-			// 预览图片
-			previewImage(url) {
-				uni.previewImage({
-					current: url,
-					urls: [url]
-				})
-			},
+    // 上传文件
+    async uploadImage(file, type) {
+      let data = await uploadImgFull(file)
+      uni.hideLoading()
+      this[type] = data.url
+    },
 
-			async checkForm() {
-				if (!this.websitId) {
-					this.$tips('请选择入驻网点！');
-					return true
-				}if (!this.name) {
-					this.$tips('请输入姓名！');
-					return true
-				} else if (!this.idcard) {
-					this.$tips('请输入身份证号码！');
-					return true
-				} else if (!verify.isIdCard(this.idcard)) {
-					this.$tips('身份证号码格式不正确，请输入正确身份证号码！');
-					return true
-				} else if (!this.idCardImg) {
-					this.$tips('请上传身份证正面照！');
-					return true
-				}
-			},
+    async toChooseImg1(index) {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        success: res => {
+          this.uploadImage1(res.tempFilePaths[0], index)
+        },
+        fail: err => {
+          console.log(err)
+        }
+      })
+    },
 
-			async submit() {
-				const that = this
-				let is_save = await this.checkForm()
-				let workerImgs = []
-				for(var i = 0;i < this.imgList.length;i++){
-					if(!this.imgList[i].imgUrl){
-						return this.$tips('请上传' + this.imgList[i].dictValue +'!');
-						break;
-					}else{
-						workerImgs.push({
-							imgName: this.imgList[i].dictValue,
-							imgUrl: this.imgList[i].imgUrl
-						})
-					}
-				}
-				if (!is_save) {
-					if(!this.isChecked){
-						this.$tips('请先阅读并同意服务协议！')
-						return false
-					}
-					this.$api.postJson('/user/apply', {
-						idCard: this.idcard,
-						idCardImg: this.idCardImg,
-						name: this.name,
-						bankAccount: this.bankAccount,
-						type: 'WORKER',
-						websitId: this.websitId,
-						workerImgs
-					}, true, true, true).then(res => {
-						if (res.code == 200) {
-							this.$toast('提交审核成功！')
-							setTimeout(()=>{
-								this.$navToPage({
-								    delta: 1
-								}, 'navigateBack')
-							},1500)
-						} else {
-							this.$tips(res.msg)
-						}
-					})
-				}
-			},
-			navToPage(url){
-				this.$navToPage({
-					url
-				})
-			}
-		},
-	}
+    async uploadImage1(file, index) {
+      let data = await uploadImgFull(file)
+      uni.hideLoading()
+      this.imgList[index].imgUrl = data.url
+    },
 
-	// #endif
-	// #ifndef H5
-	export default {
-		data() {
-			return {
-				pam: {},
-			}
-		},
-		onLoad(pam) {
-			this.pam = pam;
-		}
-	}
-	// #endif
+    // 预览图片
+    previewImage(url) {
+      uni.previewImage({
+        current: url,
+        urls: [url]
+      })
+    },
+
+    async checkForm() {
+      if (!this.websitId) {
+        this.$tips('请选择入驻网点！')
+        return true
+      }
+      if (!this.name) {
+        this.$tips('请输入姓名！')
+        return true
+      } else if (!this.idcard) {
+        this.$tips('请输入身份证号码！')
+        return true
+      } else if (!verify.isIdCard(this.idcard)) {
+        this.$tips('身份证号码格式不正确，请输入正确身份证号码！')
+        return true
+      } else if (!this.idCardImg) {
+        this.$tips('请上传身份证正面照！')
+        return true
+      }
+    },
+
+    async submit() {
+      const that = this
+      let is_save = await this.checkForm()
+      let workerImgs = []
+      for (var i = 0; i < this.imgList.length; i++) {
+        if (!this.imgList[i].imgUrl) {
+          return this.$tips('请上传' + this.imgList[i].dictValue + '!')
+          break
+        } else {
+          workerImgs.push({
+            imgName: this.imgList[i].dictValue,
+            imgUrl: this.imgList[i].imgUrl
+          })
+        }
+      }
+      if (!is_save) {
+        if (!this.isChecked) {
+          this.$tips('请先阅读并同意服务协议！')
+          return false
+        }
+        this.$api
+          .postJson(
+            '/user/apply',
+            {
+              idCard: this.idcard,
+              idCardImg: this.idCardImg,
+              name: this.name,
+              bankAccount: this.bankAccount,
+              type: 'WORKER',
+              websitId: this.websitId,
+              workerImgs
+            },
+            true,
+            true,
+            true
+          )
+          .then(res => {
+            if (res.code == 200) {
+              this.$toast('提交审核成功！')
+              setTimeout(() => {
+                this.$navToPage(
+                  {
+                    delta: 1
+                  },
+                  'navigateBack'
+                )
+              }, 1500)
+            } else {
+              this.$tips(res.msg)
+            }
+          })
+      }
+    },
+    navToPage(url) {
+      this.$navToPage({
+        url
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	.flex {
-		display: flex;
-		align-items: center;
-	}
-	.flex_asb {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.mode {
-		background-color: #ffffff;
-		padding: 40rpx 30rpx;
-		box-sizing: border-box;
-		h3 {
-			margin-bottom: 60rpx;
-		}
-		.required:before {
-			content: '*';
-			color: #ff0000;
-		}
-		.item {
-			width: 100%;
-			padding: 20rpx 0;
-			box-sizing: border-box;
-			margin-bottom: 30rpx;
-			border-bottom: 1rpx solid #eeeeee;
-			box-sizing: border-box;
-			input {
-				flex: 1;
-				text-align: right;
-				padding: 0 20rpx;
-			}
-			image {
-				width: 32rpx;
-				height: 32rpx;
-			}
-		}
-	}
-	.imgs {
-		text-align: center;
-		position: relative;
-		#img {
-			width: 690rpx;
-			height: 320rpx;
-			padding: 30rpx 0;
-		}
-		.addimg {
-			width: 690rpx;
-			height: 320rpx;
-			border: 1rpx solid #eeeeee;
-			border-radius: 10rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 30rpx 0;
+.image-container {
+  background: #ffffff;
+
+  .images {
+    display: flex;
+    flex-wrap: wrap;
+
+    .add {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 146rpx;
+      height: 146rpx;
+      border: 2rpx dashed #dadada;
+      border-radius: 10rpx;
+      margin-top: 20rpx;
+
+      .iconfont {
+        font-size: 48rpx;
+        color: #999999;
+      }
+
+      .text {
+        font-size: 24rpx;
+        color: #999999;
+        margin-top: 10rpx;
+      }
+    }
+
+    .img {
+      position: relative;
+      margin-right: 40rpx;
+      margin-top: 20rpx;
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      image {
+        width: 150rpx;
+        height: 150rpx;
+        border-radius: 10rpx;
+        overflow: hidden;
+        display: block;
+      }
+
+      text {
+        position: absolute;
+        right: -10rpx;
+        top: -10rpx;
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        background: #ff3f42;
+        font-size: 24rpx;
+        color: #ffffff;
+        text-align: center;
+        line-height: 40rpx;
+        display: block;
+      }
+    }
+  }
+}
+.app-container {
+  height: auto !important;
+}
+.mokuaikapian {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  margin-bottom: 40rpx;
+  .mokuaineirongquyu {
+    width: 100%;
+    height: auto;
+    background-color: #ffffff;
+    padding: 30rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.flex_asb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.mode {
+  padding: 40rpx 30rpx;
+  box-sizing: border-box;
+  h3 {
+    margin-bottom: 60rpx;
+  }
+  .required:before {
+    content: '*';
+    color: #ff0000;
+  }
+  .item {
+    width: 100%;
+    padding: 20rpx 0;
+    box-sizing: border-box;
+    margin-bottom: 30rpx;
+    border-bottom: 1rpx solid #eeeeee;
+    box-sizing: border-box;
+    input {
+      flex: 1;
+      text-align: right;
+      padding: 0 20rpx;
+    }
+    image {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+}
+.imgs {
+  text-align: center;
+  position: relative;
+  #img {
+    width: 100%;
+    height: 320rpx;
+    padding: 30rpx 0;
+  }
+  .addimg {
+    width: 100%;
+    height: 320rpx;
+    border: 1rpx solid #eeeeee;
+    border-radius: 10rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30rpx 0;
 
-			image {
-				width: 64rpx;
-				height: 64rpx;
-			}
-		}
-		.text {
-			color: #999999;
-		}
-		.del {
-			width: 38rpx !important;
-			height: 38rpx !important;
-			position: absolute;
-			right: -14rpx;
-			top: 8rpx;
-			z-index: 9;
-		}
-	}
-	.zhu{
-		margin-top: 30rpx;
-		color: #ffa700;
-	}
-	.btn {
-		width: 690rpx;
-		height: 80rpx;
-		background-color: #0379FF;
-		color: #ffffff;
-		text-align: center;
-		line-height: 80rpx;
-		border-radius: 40rpx;
-		margin: 0 auto;
-		margin-bottom: 20rpx;
-	}
-	.notification{
-		color: #0379FF;
-	}
-	.xieyi{
-		padding: 30rpx;
-		font-size: 28rpx;
-		image{
-			border: 2rpx #00BFFF;
-			border-radius: 50%;
-			height: 40rpx;
-			width: 40rpx;
-			vertical-align: sub;
-			margin-right: 30rpx;
-		}
-	}
-</style>
+    image {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
+  .text {
+    color: #999999;
+  }
+  .del {
+    width: 38rpx !important;
+    height: 38rpx !important;
+    position: absolute;
+    right: -14rpx;
+    top: 8rpx;
+    z-index: 9;
+  }
+}
+.zhu {
+  margin-top: 30rpx;
+  color: #ffa700;
+}
+.btn {
+  width: 690rpx;
+  height: 80rpx;
+  background-color: #0379ff;
+  color: #ffffff;
+  text-align: center;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  margin: 0 auto;
+  margin-bottom: 20rpx;
+}
+.notification {
+  color: #0379ff;
+}
+.xieyi {
+  padding: 30rpx;
+  font-size: 28rpx;
+  image {
+    border: 2rpx #00bfff;
+    border-radius: 50%;
+    height: 40rpx;
+    width: 40rpx;
+    vertical-align: sub;
+    margin-right: 30rpx;
+  }
+}
+</style>