From 25ee0fc249a081bb7bc4b485708c3e1afd3b07d1 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 18 九月 2025 14:13:17 +0800
Subject: [PATCH] 商品兑换卷调整以及绑定电话号码调整
---
pages/mine/set/personMsg.vue | 808 ++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 539 insertions(+), 269 deletions(-)
diff --git a/pages/mine/set/personMsg.vue b/pages/mine/set/personMsg.vue
index e330a0c..16543c8 100644
--- a/pages/mine/set/personMsg.vue
+++ b/pages/mine/set/personMsg.vue
@@ -1,286 +1,556 @@
<template>
- <view class="person-msg">
- <view class="head c-content" @click="changeFace">
- <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
- <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
- <view>鐐瑰嚮淇敼澶村儚</view>
- </view>
- <u-form :model="form" ref="uForm" class="form">
- <u-form-item label="鏄电О" label-width="150">
- <u-input v-model="form.nickName" placeholder="璇疯緭鍏ユ樀绉�" />
- </u-form-item>
- <u-form-item label="鎬у埆" label-width="150">
- <u-radio-group v-model="form.sex" :active-color="lightColor">
- <u-radio name="1">鐢�</u-radio>
- <u-radio name="0">濂�</u-radio>
- </u-radio-group>
- </u-form-item>
+ <view class="person-msg">
+ <view class="head c-content">
+ <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
+ <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
+ <button class="avatar-button" type="default" open-type="chooseAvatar"聽@chooseavatar="onChooseAvatar">鐐瑰嚮淇敼澶村儚</button>
+ </view>
+ <u-form :model="form" ref="uForm" class="form">
+ <u-form-item label="鏄电О" label-width="150">
+ <u-input v-model="form.nickName" placeholder="璇疯緭鍏ユ樀绉�" type="nickname"/>
+
+ </u-form-item>
+
+ <u-form-item label="鎬у埆" label-width="150">
+ <u-radio-group v-model="form.sex" :active-color="lightColor">
+ <u-radio name="1">鐢�</u-radio>
+ <u-radio name="0">濂�</u-radio>
+ </u-radio-group>
+ </u-form-item>
- <u-form-item label="鐢熸棩" label-width="150" right-icon="arrow-right">
- <div style="width: 100%;" @click="showBirthday = true">{{ birthday || '璇烽�夋嫨鍑虹敓鏃ユ湡' }}</div>
- <u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor" @confirm="selectTime"></u-picker>
- </u-form-item>
- <u-form-item label="鍩庡競" label-width="150" placeholder="璇烽�夋嫨鍩庡競" right-icon="arrow-right">
- <div style="width: 100%;" @click="clickRegion">{{ form.___path || '璇烽�夋嫨鍩庡競' }}</div>
- </u-form-item>
-
- <u-form-item label="鎵嬫満鍙�" label-width="150">
- <view v-if="form.mobile">
- {{form.mobile}}
- </view>
- <view v-else>
- <view class="submit" @click="navigateTo(form.username)">缁戝畾鎵嬫満鍙风爜</view>
- </view>
- </u-form-item>
-
- </u-form>
- <div class="bottom">
- <view class="submit" @click="submit">淇濆瓨</view>
- <view class="submit light" @click="quiteLoginOut">閫�鍑虹櫥褰�</view>
- </div>
- <m-city :provinceData="region" headTitle="鍖哄煙閫夋嫨" ref="cityPicker" @funcValue="getPickerParentValue" pickerSize="4"></m-city>
- </view>
+ <u-form-item label="鐢熸棩" label-width="150" right-icon="arrow-right">
+ <div style="width: 100%;" @click="showBirthday = true">{{ birthday || '璇烽�夋嫨鍑虹敓鏃ユ湡' }}</div>
+ <u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor"
+ @confirm="selectTime"></u-picker>
+ </u-form-item>
+ <u-form-item label="鍩庡競" label-width="150" placeholder="璇烽�夋嫨鍩庡競" right-icon="arrow-right">
+ <div style="width: 100%;" @click="clickRegion">{{ form.___path || '璇烽�夋嫨鍩庡競' }}</div>
+ </u-form-item>
+
+ <u-form-item label="鎵嬫満鍙�" label-width="150">
+ <view v-if="form.mobile">
+ {{form.mobile}}
+ </view>
+ <view v-else>
+ <view class="submit" @click="navigateTo(form.username)">缁戝畾鎵嬫満鍙风爜</view>
+ </view>
+ </u-form-item>
+ <u-form-item label="鎴戠殑鏍囩" label-width="150">
+
+ <view class="tags-container">
+ <view v-for="(tag, index) in memberTags" :key="index"
+ :class="tag.tagName.length >=5 ? 'longTag' : 'tag'" @click="toggleTag(tag)">
+ {{tag.tagName}}
+ <u-icon name="close" size="16" class="delete-icon" @click.stop="removeTag(tag)"></u-icon>
+ </view>
+ <view class="add-tag" @click="showAddTagDialog">
+ <u-icon name="plus" size="24"></u-icon> 鑷畾涔�
+ </view>
+ </view>
+ </u-form-item>
+
+ </u-form>
+ <div class="bottom">
+ <view class="submit" @click="submit">淇濆瓨</view>
+ <view class="submit light" @click="quiteLoginOut">閫�鍑虹櫥褰�</view>
+ </div>
+ <m-city :provinceData="region" headTitle="鍖哄煙閫夋嫨" ref="cityPicker" @funcValue="getPickerParentValue"
+ pickerSize="4"></m-city>
+ </view>
</template>
<script>
-import '@/components/uview-components/uview-ui';
-import { getSTSToken } from "@/api/common.js";
-import { saveUserInfo, getUserInfo } from "@/api/members.js";
-import { upload } from "@/api/common.js";
-import { getFileKey } from "@/utils/file.js";
-import storage from "@/utils/storage.js";
-import city from "@/pages/mine/set/m-city/m-city.vue";
-export default {
- components: { "m-city": city },
- data() {
- return {
- cosClient: null,
- bucket: '',
- region: '',
- endpoint: '',
- lightColor: this.$lightColor, //楂樹寒棰滆壊
- form: {
- nickName: storage.getUserInfo().nickName || "",
- birthday: storage.getUserInfo().birthday || "",
- face: storage.getUserInfo().face, //榛樿澶村儚
- regionId: [], //鍦板潃Id
- region: storage.getUserInfo().region || [], //鍦板潃
- sex: storage.getUserInfo().sex, //鎬у埆
- ___path: storage.getUserInfo().region,
- mobile: storage.getUserInfo().mobile,
- username: storage.getUserInfo().username,
- },
- birthday: storage.getUserInfo().birthday || "", //鐢熸棩
- photo: [
- { text: "绔嬪嵆鎷嶇収", color: this.$mainColor },
- { text: "浠庣浉鍐岄�夋嫨", color: this.$mainColor },
- ],
- region: [
- //璇锋眰鍩庡競榛樿鍦板潃
- {
- id: "",
- localName: "璇烽�夋嫨",
- children: [],
- },
- ],
- showBirthday: false, //鏄剧ず鐢熸棩鏃ユ湡
- };
- },
- onLoad() {
- this.initCOS()
- },
- methods: {
- // 鍒濆鍖栬吘璁簯cos瀹㈡埛绔�
- initCOS() {
- // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
- getSTSToken().then(res => {
- const COS = require('@/lib/cos-wx-sdk-v5.js'); // 寮�鍙戞椂浣跨敤
- // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 涓婄嚎鏃朵娇鐢ㄥ帇缂╁寘
-
- // console.log(COS.version); sdk 鐗堟湰闇�瑕佷笉浣庝簬 1.7.2
- this.cosClient = new COS({
- SecretId: res.data.data.tmpSecretId, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretId
- SecretKey: res.data.data.tmpSecretKey, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretKey
- SecurityToken: res.data.data.sessionToken, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� SessionToken
- StartTime: res.data.data.stsStartTime, // 寤鸿浼犲叆鏈嶅姟绔椂闂达紝鍙伩鍏嶅鎴风鏃堕棿涓嶅噯瀵艰嚧鐨勭鍚嶉敊璇�
- ExpiredTime: res.data.data.stsEndTime, // 涓存椂瀵嗛挜杩囨湡鏃堕棿
- SimpleUploadMethod: 'putObject', // 寮虹儓寤鸿锛岄珮绾т笂浼犮�佹壒閲忎笂浼犲唴閮ㄥ灏忔枃浠跺仛绠�鍗曚笂浼犳椂浣跨敤 putObject,sdk 鐗堟湰鑷冲皯闇�瑕乿1.3.0
- });
- this.bucket = res.data.data.bucket
- this.region = res.data.data.region
- this.endpoint = res.data.data.endpoint
- })
- },
- /**
- * 閫�鍑虹櫥褰�
- */
- quiteLoginOut() {
- this.$options.filters.quiteLoginOut();
- },
-
- /**
- * 閫夋嫨鍦板潃鍥炶皟
- */
- getPickerParentValue(e) {
- this.form.region = [];
- this.form.regionId = [];
- let name = "";
+ import '@/components/uview-components/uview-ui';
+ import {
+ getSTSToken
+ } from "@/api/common.js";
+ import {
+ saveUserInfo,
+ getUserInfo
+ } from "@/api/members.js";
+ import {
+ upload
+ } from "@/api/common.js";
+ import {
+ getFileKey
+ } from "@/utils/file.js";
+ import storage from "@/utils/storage.js";
+ import city from "@/pages/mine/set/m-city/m-city.vue";
+ import {
+ getMemberTag,
+ addTag,
+ removeTag
+ } from "@/api/memberCustomerTag.js"
+ export default {
+ components: {
+ "m-city": city
+ },
+ data() {
+ return {
+ memberTags: null,
+ cosClient: null,
+ bucket: '',
+ region: '',
+ endpoint: '',
+ lightColor: this.$lightColor, //楂樹寒棰滆壊
+ form: {
+ nickName: storage.getUserInfo().nickName || "",
+ birthday: storage.getUserInfo().birthday || "",
+ face: storage.getUserInfo().face, //榛樿澶村儚
+ regionId: [], //鍦板潃Id
+ region: storage.getUserInfo().region || [], //鍦板潃
+ sex: storage.getUserInfo().sex, //鎬у埆
+ ___path: storage.getUserInfo().region,
+ mobile: storage.getUserInfo().mobile,
+ username: storage.getUserInfo().username,
+ },
+ birthday: storage.getUserInfo().birthday || "", //鐢熸棩
+ photo: [{
+ text: "绔嬪嵆鎷嶇収",
+ color: this.$mainColor
+ },
+ {
+ text: "浠庣浉鍐岄�夋嫨",
+ color: this.$mainColor
+ },
+ ],
+ region: [
+ //璇锋眰鍩庡競榛樿鍦板潃
+ {
+ id: "",
+ localName: "璇烽�夋嫨",
+ children: [],
+ },
+ ],
+ showBirthday: false, //鏄剧ず鐢熸棩鏃ユ湡
+ };
+ },
+ onShow() {
+ this.form = {
+ nickName: storage.getUserInfo().nickName || "",
+ birthday: storage.getUserInfo().birthday || "",
+ face: storage.getUserInfo().face, //榛樿澶村儚
+ regionId: [], //鍦板潃Id
+ region: storage.getUserInfo().region || [], //鍦板潃
+ sex: storage.getUserInfo().sex, //鎬у埆
+ ___path: storage.getUserInfo().region,
+ mobile: storage.getUserInfo().mobile,
+ username: storage.getUserInfo().username,
+ }
+ },
+ onLoad() {
+ this.initCOS()
+ this.getMemberTag()
+ },
+ methods: {
+
+ toggleTag(tag) {
+ console.log(tag)
+ },
+ addTag(content) {
+ const form = {
+ tagName: content,
+ }
+ addTag(form).then(res => {
+ if (res.statusCode === 200) {
+ if(res.data.code !==200){
+ uni.showToast({
+ title: res.data.msg,
+ icon: 'none'
+ });
+ return
+ }
+ this.getMemberTag()
+ }
+ })
+ },
+ removeTag(tag) {
+ removeTag(tag.id).then(res => {
+ if (res.statusCode === 200) {
+ if(res.data.code !==200){
+ uni.showToast({
+ title: res.data.msg,
+ icon: 'none'
+ });
+ return
+ }
+ this.getMemberTag()
+ }
+ })
+ },
+ getMemberTag() {
+ uni.showLoading({
+ title: '鍔犺浇涓�',
+ mask: true
+ });
+ getMemberTag().then(res => {
+ uni.hideLoading();
+ if (res.statusCode === 200) {
+ if(res.data.code !== 200){
+ uni.showToast({
+ title: res.data.msg,
+ icon: 'none'
+ });
+ return
+ }
+ this.memberTags = res.data.data
- e.forEach((item, index) => {
- if (item.id) {
- this.form.region.push(item.localName);
- this.form.regionId.push(item.id);
- if (index == e.length - 1) {
- name += item.localName;
- } else {
- name += item.localName + ",";
- }
- this.form.___path = name;
- }
- });
- },
+ }
+ })
+ },
+ showAddTagDialog() {
+ uni.showModal({
+ title: '娣诲姞鑷畾涔夋爣绛�',
+ editable: true,
+ placeholderText: '璇疯緭鍏ユ爣绛惧唴瀹癸紙鏈�澶�8涓瓧锛�',
+ success: (res) => {
+ if (res.confirm) {
+ if (!res.content) {
+ uni.showToast({
+ title: '鏍囩鍐呭涓嶈兘涓虹┖',
+ icon: 'none'
+ });
+ return;
+ }
- /**
- * 鐐瑰嚮閫夋嫨鍦板潃
- */
- clickRegion() {
- this.$refs.cityPicker.show();
- },
+ if (res.content.length > 8) {
+ uni.showToast({
+ title: '鏍囩闀垮害涓嶈兘瓒呰繃8涓瓧',
+ icon: 'none'
+ });
+ return;
+ }
+ this.addTag(res.content)
+ }
+ }
+ });
+ },
+ // 鍒濆鍖栬吘璁簯cos瀹㈡埛绔�
+ initCOS() {
+ // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
+ getSTSToken().then(res => {
+ const COS = require('@/lib/cos-wx-sdk-v5.js'); // 寮�鍙戞椂浣跨敤
+ // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 涓婄嚎鏃朵娇鐢ㄥ帇缂╁寘
- /**
- * 鎻愪氦淇濆瓨
- */
- submit() {
- delete this.form.___path;
- let params = JSON.parse(JSON.stringify(this.form));
- saveUserInfo(params).then((res) => {
- if (res.statusCode == 200) {
- storage.setUserInfo(res.data.result);
- uni.navigateBack();
- }
- });
- },
+ // console.log(COS.version); sdk 鐗堟湰闇�瑕佷笉浣庝簬 1.7.2
+ this.cosClient = new COS({
+ SecretId: res.data.data.tmpSecretId, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretId
+ SecretKey: res.data.data.tmpSecretKey, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� secretKey
+ SecurityToken: res.data.data.sessionToken, // sts 鏈嶅姟涓嬪彂鐨勪复鏃� SessionToken
+ StartTime: res.data.data.stsStartTime, // 寤鸿浼犲叆鏈嶅姟绔椂闂达紝鍙伩鍏嶅鎴风鏃堕棿涓嶅噯瀵艰嚧鐨勭鍚嶉敊璇�
+ ExpiredTime: res.data.data.stsEndTime, // 涓存椂瀵嗛挜杩囨湡鏃堕棿
+ SimpleUploadMethod: 'putObject', // 寮虹儓寤鸿锛岄珮绾т笂浼犮�佹壒閲忎笂浼犲唴閮ㄥ灏忔枃浠跺仛绠�鍗曚笂浼犳椂浣跨敤 putObject,sdk 鐗堟湰鑷冲皯闇�瑕乿1.3.0
+ });
+ this.bucket = res.data.data.bucket
+ this.region = res.data.data.region
+ this.endpoint = res.data.data.endpoint
+ })
+ },
+ /**
+ * 閫�鍑虹櫥褰�
+ */
+ quiteLoginOut() {
+ this.$options.filters.quiteLoginOut();
+ },
- /**
- * 淇敼澶村儚
- */
- changeFace(index) {
- uni.chooseImage({
- count: 1,
- sizeType: ['compressed'],
- sourceType: ['album'],
- success: (chooseImageRes) => {
- const tempFilePath = chooseImageRes.tempFilePaths[0];
- let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
- // 澶勭悊瀹夊崜鍙兘鐨刄RI缂栫爜
- if(fileName.indexOf('%') > -1) {
- fileName = decodeURIComponent(fileName);
- }
- const fileKey = getFileKey(fileName);
- this.cosClient.uploadFile({
- Bucket: this.bucket,
- Region: this.region,
- Key: fileKey,
- FilePath: tempFilePath,
- SliceSize: 1024 * 1024 * 5 /* 瑙﹀彂鍒嗗潡涓婁紶鐨勯槇鍊�,5M */
- }, (err, data) => {
- if (err) {
- console.log('涓婁紶澶辫触', err);
- } else {
- this.form.face = fileKey;
- }
- });
- },
- });
- },
+ /**
+ * 閫夋嫨鍦板潃鍥炶皟
+ */
+ getPickerParentValue(e) {
+ this.form.region = [];
+ this.form.regionId = [];
+ let name = "";
- /**
- * 閫夋嫨鍦板潃
- */
- selectRegion(region) {
- this.$set(
- this.form,
- "address",
- `${region.province.label} ${region.city.label} ${region.area.label}`
- );
- },
+ e.forEach((item, index) => {
+ if (item.id) {
+ this.form.region.push(item.localName);
+ this.form.regionId.push(item.id);
+ if (index == e.length - 1) {
+ name += item.localName;
+ } else {
+ name += item.localName + ",";
+ }
+ this.form.___path = name;
+ }
+ });
+ },
- /**
- * 閫夋嫨鏃堕棿
- */
- selectTime(time) {
- this.form.birthday = `${time.year}-${time.month}-${time.day}`;
- this.birthday = `${time.year} - ${time.month} - ${time.day}`;
- },
-
- navigateTo(username) {
- uni.navigateTo({
- url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
- });
- },
- }
+ /**
+ * 鐐瑰嚮閫夋嫨鍦板潃
+ */
+ clickRegion() {
+ this.$refs.cityPicker.show();
+ },
-};
+ /**
+ * 鎻愪氦淇濆瓨
+ */
+ submit() {
+ delete this.form.___path;
+ let params = JSON.parse(JSON.stringify(this.form));
+ saveUserInfo(params).then((res) => {
+ if (res.statusCode == 200) {
+ storage.setUserInfo(res.data.result);
+ uni.navigateBack();
+ }
+ });
+ },
+ /**
+ * 淇敼澶村儚
+ * @param {Object} e
+ */
+ onChooseAvatar(e){
+ console.log(e.detail.avatarUrl)
+ console.log("")
+ console.log(e.detail)
+ const tempFilePath = e.detail.avatarUrl;
+ let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
+ if (fileName.indexOf('%') > -1) {
+ fileName = decodeURIComponent(fileName);
+ }
+ const fileKey = getFileKey(fileName);
+ this.cosClient.uploadFile({
+ Bucket: this.bucket,
+ Region: this.region,
+ Key: fileKey,
+ FilePath: tempFilePath,
+ SliceSize: 1024 * 1024 * 5 /* 瑙﹀彂鍒嗗潡涓婁紶鐨勯槇鍊�,5M */
+ }, (err, data) => {
+ if (err) {
+ console.log('涓婁紶澶辫触', err);
+ } else {
+ this.form.face = fileKey;
+ }
+ });
+ },
+ /**
+ * 淇敼澶村儚
+ */
+ // changeFace(index) {
+ // uni.chooseImage({
+ // count: 1,
+ // sizeType: ['compressed'],
+ // sourceType: ['album'],
+ // success: (chooseImageRes) => {
+
+ // const tempFilePath = chooseImageRes.tempFilePaths[0];
+ // let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
+ // // 澶勭悊瀹夊崜鍙兘鐨刄RI缂栫爜
+ // if (fileName.indexOf('%') > -1) {
+ // fileName = decodeURIComponent(fileName);
+ // }
+ // const fileKey = getFileKey(fileName);
+ // this.cosClient.uploadFile({
+ // Bucket: this.bucket,
+ // Region: this.region,
+ // Key: fileKey,
+ // FilePath: tempFilePath,
+ // SliceSize: 1024 * 1024 * 5 /* 瑙﹀彂鍒嗗潡涓婁紶鐨勯槇鍊�,5M */
+ // }, (err, data) => {
+ // if (err) {
+ // console.log('涓婁紶澶辫触', err);
+ // } else {
+ // this.form.face = fileKey;
+ // }
+ // });
+ // },
+ // });
+ // },
+
+ /**
+ * 閫夋嫨鍦板潃
+ */
+ selectRegion(region) {
+ this.$set(
+ this.form,
+ "address",
+ `${region.province.label} ${region.city.label} ${region.area.label}`
+ );
+ },
+
+ /**
+ * 閫夋嫨鏃堕棿
+ */
+ selectTime(time) {
+ this.form.birthday = `${time.year}-${time.month}-${time.day}`;
+ this.birthday = `${time.year} - ${time.month} - ${time.day}`;
+ },
+
+ navigateTo(username) {
+ uni.navigateTo({
+ url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
+ });
+ },
+ }
+
+ };
</script>
<style>
-page{
- background: #fff;
-}
+ page {
+ background: #fff;
+ }
</style>
<style lang="scss" scoped>
-.submit {
- height: 90rpx;
- line-height: 90rpx;
- text-align: center;
- margin-top: 90rpx;
+ .submit {
+ height: 90rpx;
+ line-height: 90rpx;
+ text-align: center;
+ margin-top: 90rpx;
- width: 100%;
- margin: 0 auto;
- color: $main-color;
- border-radius: 100px;
-}
-.head {
- height: 260rpx;
- color: $font-color-light;
- font-size: $font-sm;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- line-height: 2em;
- image {
- width: 144rpx;
- height: 144rpx;
- border-radius: 50%;
- }
-}
-/deep/ .u-form {
- background-color: #ffffff;
- padding: 0;
- margin-top: 30rpx;
- .u-form-item {
- padding: 0 20rpx;
- height: 110rpx;
- line-height: 110rpx;
- }
-}
-.form {
- background-color: #ffffff;
-}
-.bottom{
- position: fixed;
- bottom: 40px;
- display: flex;
- align-items: center;
- width: 100%;
- >.submit{
- background: $light-color;
- color: #fff;
- width: 40%;
- }
+ width: 100%;
+ margin: 0 auto;
+ color: $main-color;
+ border-radius: 100px;
+ }
-}
-.light{
- background: rgba($color: $light-color, $alpha: 0.2) !important;
- color: $light-color !important;
-}
-</style>
+ .head {
+ height: 260rpx;
+ color: $font-color-light;
+ font-size: $font-sm;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ line-height: 2em;
+
+ image {
+ width: 144rpx;
+ height: 144rpx;
+ border-radius: 50%;
+ }
+ }
+
+ /deep/ .u-form {
+ background-color: #ffffff;
+ padding: 0;
+ margin-top: 30rpx;
+
+ .u-form-item {
+ padding: 0 20rpx;
+ height: 110rpx;
+ line-height: 110rpx;
+ }
+ }
+
+ .form {
+ background-color: #ffffff;
+ }
+
+ .bottom {
+ position: fixed;
+ bottom: 40px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+
+ >.submit {
+ background: $light-color;
+ color: #fff;
+ width: 40%;
+ }
+
+ }
+
+ .light {
+ background: rgba($color: $light-color, $alpha: 0.2) !important;
+ color: $light-color !important;
+ }
+
+ /**
+ * 鏍囩浣嶇疆鏍峰紡
+ */
+ .tags-container {
+ display: flex;
+ flex-flow: row wrap;
+ /* 淇濇寔瀹藉害涓旀崲琛� */
+ gap: 12rpx;
+ /* 鏍囩闂磋窛 */
+ padding: 10rpx 0;
+ width: 100%;
+ /* 纭繚瀹瑰櫒瀹藉害濉弧 */
+
+ }
+
+ /* 鏍囩鍩虹鏍峰紡 */
+ .tag,
+ .add-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 60rpx;
+ line-height: 60rpx;
+ border-radius: 30rpx;
+ font-size: 26rpx;
+ padding: 0 24rpx;
+ white-space: nowrap;
+ margin-right: 12rpx;
+ margin-bottom: 12rpx;
+ flex-shrink: 0;
+ /* 绂佹鍘嬬缉 */
+ }
+
+ /* 鏅�氭爣绛炬牱寮� */
+ .tag {
+ background-color: #f5f5f5;
+ color: #666;
+ position: relative;
+ padding-right: 48rpx;
+ /* 涓哄垹闄ゅ浘鏍囩暀绌洪棿 */
+ }
+
+ .longTag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 60rpx;
+ line-height: 60rpx;
+ border-radius: 30rpx;
+ font-size: 26rpx;
+ padding: 0 24rpx;
+ white-space: nowrap;
+ margin-right: 12rpx;
+ margin-bottom: 12rpx;
+ flex-shrink: 0;
+ /* 绂佹鍘嬬缉 */
+ width: 300rpx;
+ background-color: #f5f5f5;
+ color: #666;
+ position: relative;
+ padding-right: 48rpx;
+ /* 涓哄垹闄ゅ浘鏍囩暀绌洪棿 */
+ }
+
+ /* 娣诲姞鏍囩鎸夐挳鏍峰紡 */
+ .add-tag {
+ border: 1px dashed #ccc;
+ color: #999;
+ }
+
+ /* 鍒犻櫎鎸夐挳 */
+ .delete-icon {
+ position: absolute;
+ right: 12rpx;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24rpx;
+ height: 24rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.1);
+ color: #999;
+ font-size: 24rpx;
+ }
+ .avatar-button {
+ background: transparent;
+ color: $font-color-light;
+ font-size: $font-sm;
+ line-height: 2em;
+ margin: 0;
+ padding: 0;
+ border: none;
+ &::after {
+ border: none;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.8.0