create-weapp-vite 2.0.31 → 2.0.32

package/templates/wevu-retail/src/pages/user/person-info/index.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+import Toast from 'tdesign-miniprogram/toast/index'
+import { fetchPerson } from '../../../services/usercenter/fetchPerson'
+import { phoneEncryption } from '../../../utils/util'
+
+Page({
+  data: {
+    personInfo: {
+      avatarUrl: '',
+      nickName: '',
+      gender: 0,
+      phoneNumber: '',
+    },
+    showUnbindConfirm: false,
+    pickerOptions: [
+      {
+        name: '男',
+        code: '1',
+      },
+      {
+        name: '女',
+        code: '2',
+      },
+    ],
+    typeVisible: false,
+    genderMap: ['', '男', '女'],
+  },
+  onLoad() {
+    this.init()
+  },
+  init() {
+    this.fetchData()
+  },
+  fetchData() {
+    fetchPerson().then((personInfo) => {
+      this.setData({
+        personInfo,
+        'personInfo.phoneNumber': phoneEncryption(personInfo.phoneNumber),
+      })
+    })
+  },
+  onClickCell({ currentTarget }) {
+    const { dataset } = currentTarget
+    const { nickName } = this.data.personInfo
+
+    switch (dataset.type) {
+      case 'gender':
+        this.setData({
+          typeVisible: true,
+        })
+        break
+      case 'name':
+        wx.navigateTo({
+          url: `/pages/user/name-edit/index?name=${nickName}`,
+        })
+        break
+      case 'avatarUrl':
+        this.toModifyAvatar()
+        break
+      default: {
+        break
+      }
+    }
+  },
+  onClose() {
+    this.setData({
+      typeVisible: false,
+    })
+  },
+  onConfirm(e) {
+    const { value } = e.detail
+    this.setData(
+      {
+        'typeVisible': false,
+        'personInfo.gender': value,
+      },
+      () => {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '设置成功',
+          theme: 'success',
+        })
+      },
+    )
+  },
+  async toModifyAvatar() {
+    try {
+      const tempFilePath = await new Promise((resolve, reject) => {
+        wx.chooseImage({
+          count: 1,
+          sizeType: ['compressed'],
+          sourceType: ['album', 'camera'],
+          success: (res) => {
+            const { path, size } = res.tempFiles[0]
+            if (size <= 10485760) {
+              resolve(path)
+            }
+            else {
+              reject({ errMsg: '图片大小超出限制，请重新上传' })
+            }
+          },
+          fail: err => reject(err),
+        })
+      })
+      const tempUrlArr = tempFilePath.split('/')
+      const tempFileName = tempUrlArr[tempUrlArr.length - 1]
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `已选择图片-${tempFileName}`,
+        theme: 'success',
+      })
+    }
+    catch (error) {
+      if (error.errMsg === 'chooseImage:fail cancel') { return }
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: error.errMsg || error.msg || '修改头像出错了',
+        theme: 'error',
+      })
+    }
+  },
+})
+</script>
+
+<template>
+<view class="person-info [padding-top:20rpx] [&_.order-group__left]:[margin-right:0] [&_.t-cell-class]:[height:112rpx]">
+  <t-cell-group>
+    <t-cell
+      title="头像"
+      center="{{true}}"
+      data-type="avatarUrl"
+      bind:click="onClickCell"
+      arrow
+      t-class-left="order-group__left"
+    >
+      <t-image slot="note" src="{{personInfo.avatarUrl}}" t-class="avatarUrl [width:80rpx] [height:80rpx] ![border-radius:50%] [overflow:hidden]" mode="aspectFill" />
+    </t-cell>
+    <t-cell
+      title="昵称"
+      arrow
+      note="{{personInfo.nickName}}"
+      data-type="name"
+      bind:click="onClickCell"
+      t-class="t-cell-class"
+      t-class-left="order-group__left"
+    />
+    <t-cell
+      title="性别"
+      arrow
+      note="{{genderMap[personInfo.gender]}}"
+      data-type="gender"
+      bind:click="onClickCell"
+      t-class="t-cell-class"
+      t-class-left="order-group__left"
+    />
+    <t-cell
+      bordered="{{false}}"
+      title="手机号"
+      arrow
+      note="{{personInfo.phoneNumber ? personInfo.phoneNumber : '去绑定手机号'}}"
+      data-type="phoneNumber"
+      bind:click="onClickCell"
+      t-class="t-cell-class"
+      t-class-left="order-group__left"
+    />
+  </t-cell-group>
+</view>
+<view class="person-info__wrapper [width:100%] [padding:0_32rpx] [padding-bottom:calc(env(safe-area-inset-bottom)_+_20rpx)] [position:absolute] [bottom:0] [left:0]">
+  <view class="person-info__btn [width:100%] [border:2rpx_solid_#ddd] [border-radius:48rpx] [padding:18rpx_0] [display:flex] [align-self:center] [justify-content:center]" bind:tap="openUnbindConfirm"> 切换账号登录 </view>
+</view>
+<t-select-picker
+  show="{{typeVisible}}"
+  picker-options="{{pickerOptions}}"
+  title="选择性别"
+  value="{{personInfo.gender}}"
+  bind:confirm="onConfirm"
+  bind:close="onClose"
+/>
+<t-toast id="t-toast" />
+</template>
+
+<json>
+{
+  "navigationBarTitleText": "个人资料",
+  "usingComponents": {
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-image": "/components/webp-image/index",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-select-picker": "../../usercenter/components/ui-select-picker/index"
+  }
+}
+</json>

package/templates/wevu-retail/src/pages/usercenter/address/edit/util.ts

@@ -0,0 +1,33 @@
+let addressPromise = [];
+
+/** 地址编辑Promise */
+export const getAddressPromise = () => {
+  let resolver;
+  let rejecter;
+  const nextPromise = new Promise((resolve, reject) => {
+    resolver = resolve;
+    rejecter = reject;
+  });
+
+  addressPromise.push({ resolver, rejecter });
+
+  return nextPromise;
+};
+
+/** 用户保存了一个地址 */
+export const resolveAddress = (address) => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  console.info('用户保存了一个地址', address);
+
+  allAddress.forEach(({ resolver }) => resolver(address));
+};
+
+/** 取消编辑 */
+export const rejectAddress = () => {
+  const allAddress = [...addressPromise];
+  addressPromise = [];
+
+  allAddress.forEach(({ rejecter }) => rejecter(new Error('cancel')));
+};

package/templates/wevu-retail/src/pages/usercenter/components/order-group/index.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+Component({
+  externalClasses: ['title-class', 'icon-class', 'number-class'],
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    orderTagInfos: {
+      type: Array,
+      value: [],
+    },
+    title: {
+      type: String,
+      value: '我的订单',
+    },
+    desc: {
+      type: String,
+      value: '全部订单',
+    },
+    isTop: {
+      type: Boolean,
+      value: true,
+    },
+    classPrefix: {
+      type: String,
+      value: 'wr',
+    },
+  },
+  methods: {
+    onClickItem(e) {
+      this.triggerEvent('onClickItem', e.currentTarget.dataset.item);
+    },
+
+    onClickTop() {
+      this.triggerEvent('onClickTop', {});
+    },
+  },
+});
+</script>
+
+<template>
+<view class="order-group [margin-bottom:24rpx] [background-color:#ffffff] [border-radius:16rpx_16rpx_0_0] [&_.order-group__top]:[padding:24rpx_18rpx_24rpx_32rpx] [&_.order-group__top]:[border-radius:16rpx_16rpx_0_0] [&_.order-group__left]:[margin-right:0]">
+  <t-cell-group wx:if="{{isTop}}">
+    <t-cell
+      t-class="order-group__top"
+      t-class-left="order-group__left"
+      t-class-title="order-group__top__title"
+      t-class-note="order-group__top__note"
+      title="{{title}}"
+      note="{{desc}}"
+      bordered="{{false}}"
+      arrow
+      bind:tap="onClickTop"
+    />
+  </t-cell-group>
+  <view class="order-group__content [overflow:hidden] [width:100%] [height:164rpx] [display:flex] [background-color:#fff] [border-radius:0_0_16rpx_16rpx]">
+    <view
+      class="order-group__item [overflow:hidden] [display:flex] [flex-direction:column] [align-items:center] [justify-content:center] [flex:1] [&:first-child]:[border-radius:0_0_0_16rpx] [&:last-child]:[border-radius:0_0_16rpx_0]"
+      wx:for="{{orderTagInfos}}"
+      wx:for-item="item"
+      wx:key="index"
+      data-item="{{item}}"
+      bindtap="onClickItem"
+    >
+      <view class="order-group__item__icon icon-class [margin-bottom:20rpx] [width:56rpx] [height:56rpx] [position:relative]">
+        <t-badge count="{{item.orderNum}}" max-count="{{99}}" color="#FF4646">
+          <t-icon
+            prefix="{{classPrefix}}"
+            name="{{item.iconName}}"
+            size="56rpx"
+            customStyle="background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%,#929292 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
+          />
+        </t-badge>
+      </view>
+      <view class="order-group__item__title title-class [font-size:24rpx] [color:#666] [line-height:32rpx]">{{item.title}}</view>
+    </view>
+  </view>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-badge": "tdesign-miniprogram/badge/badge",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}</json>

package/templates/wevu-retail/src/pages/usercenter/components/ui-select-picker/index.vue

@@ -0,0 +1,108 @@
+<script lang="ts">
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      observer(show) {
+        if (!show) return;
+        this.updateDivisions();
+      },
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    value: {
+      type: String,
+      value: '',
+      observer() {
+        if (!this.data.show) return;
+        this.updateDivisions();
+      },
+    },
+    pickerOptions: {
+      type: Array,
+      value: [],
+      observer() {
+        if (!this.data.show) return;
+        this.updateDivisions();
+      },
+    },
+    headerVisible: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    pickerValue: [],
+  },
+  methods: {
+    updateDivisions() {
+      const { pickerOptions, value } = this.data;
+      const index = (pickerOptions || []).findIndex(
+        (item) => item.code === value,
+      );
+
+      setTimeout(() => {
+        this.setData({ pickerValue: index >= 0 ? [index] : [0] });
+      }, 0);
+    },
+
+    getAreaByIndex(indexes) {
+      const { pickerOptions } = this.data;
+      return pickerOptions[indexes.toString()];
+    },
+
+    onChange(e) {
+      const currentValue = e.detail.value;
+      const target = this.getAreaByIndex(currentValue);
+      if (target === null) return;
+
+      this.setData({ pickerValue: currentValue });
+      this.triggerEvent('change', { value: target.code, target: target });
+    },
+
+    onConfirm() {
+      const target = this.getAreaByIndex(this.data.pickerValue);
+      this.triggerEvent('confirm', { value: target?.code, target });
+    },
+
+    onClose() {
+      this.triggerEvent('close');
+    },
+  },
+});
+</script>
+
+<template>
+<t-popup visible="{{show}}" placement="bottom">
+  <view class="city-picker-box [position:absolute] [bottom:-100%] [transition:0.3s_bottom_ease-in-out] [left:0] [right:0] [z-index:100] [background-color:#fff] [padding:0_30rpx] [color:#333333] [font-size:34rpx] [border-radius:20rpx_20rpx_0_0] [padding-bottom:env(safe-area-inset-bottom)]" slot="content">
+    <view wx:if="{{headerVisible}}" class="city-picker-header city-picker-more [height:100rpx] [line-height:100rpx] [text-align:center] [font-size:32rpx] [color:#333333] [display:flex] [justify-content:space-between] [align-items:center]">
+      <view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
+      <view wx:if="{{title}}" class="title">{{title}}</view>
+      <view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
+    </view>
+    <view wx:else class="city-picker-header [height:100rpx] [line-height:100rpx] [text-align:center] [font-size:32rpx] [color:#333333]">
+      <view wx:if="{{title}}" class="title">{{title}}</view>
+    </view>
+    <picker-view class="picker [height:300rpx] [margin:50rpx_0] [line-height:88rpx] [text-align:center]" indicator-class="picker-center-row [height:88rpx]" value="{{pickerValue}}" bind:change="onChange">
+      <picker-view-column class="picker-column">
+        <view wx:for="{{ pickerOptions }}" wx:key="code">{{ item.name }}</view>
+      </picker-view-column>
+    </picker-view>
+    <view class="city-picker-footer [height:100rpx] [display:flex] [justify-content:space-between] [align-items:center] [&_.btn]:[width:330rpx] [&_.btn]:[height:80rpx] [&_.btn]:[line-height:80rpx] [&_.btn]:[text-align:center] [&_.btn]:[color:#666666] [&_.btn]:[font-size:32rpx] [&_.btn]:[position:relative] [&_.btn__active]:[opacity:0.5] [&_.btn_.primary]:[color:#fa550f]" wx:if="{{!headerVisible}}">
+      <view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
+      <view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
+    </view>
+  </view>
+</t-popup>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-popup": "tdesign-miniprogram/popup/popup"
+  }
+}
+</json>

package/templates/wevu-retail/src/pages/usercenter/components/user-center-card/index.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+const AuthStepType = {
+  ONE: 1,
+  TWO: 2,
+  THREE: 3,
+};
+
+Component({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    currAuthStep: {
+      type: Number,
+      value: AuthStepType.ONE,
+    },
+    userInfo: {
+      type: Object,
+      value: {},
+    },
+    isNeedGetUserInfo: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    defaultAvatarUrl: 'https://tdesign.gtimg.com/miniprogram/template/retail/usercenter/icon-user-center-avatar@2x.png',
+    AuthStepType,
+  },
+  methods: {
+    gotoUserEditPage() {
+      this.triggerEvent('gotoUserEditPage');
+    },
+  },
+});
+</script>
+
+<template>
+<view class="user-center-card [position:fixed] [top:0] [left:0] [width:100%] [height:480rpx] [background-image:url(https://tdesign.gtimg.com/miniprogram/template/retail/template/user-center-bg-v1.png)] [background-size:cover] [background-repeat:no-repeat] [padding:0_24rpx] [background-image:url('https://tdesign.gtimg.com/miniprogram/template/retail/template/user-center-bg-v1.png')]">
+  <!-- 未登录的情况 -->
+  <block wx:if="{{currAuthStep === AuthStepType.ONE}}">
+    <view class="user-center-card__header [margin-top:192rpx] [margin-bottom:48rpx] [height:96rpx] [line-height:48rpx] [display:flex] [justify-content:flex-start] [align-items:center] [color:#333] [position:relative]" bind:tap="gotoUserEditPage">
+      <t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar [width:96rpx] [height:96rpx] [border-radius:48rpx] [overflow:hidden]" />
+      <view class="user-center-card__header__name [font-size:36rpx] [line-height:48rpx] [color:#333] [font-weight:bold] [margin-left:24rpx] [margin-right:16rpx]">{{'请登录'}}</view>
+    </view>
+  </block>
+  <!-- 已登录但未授权用户信息情况 -->
+  <block wx:if="{{currAuthStep === AuthStepType.TWO}}">
+    <view class="user-center-card__header [margin-top:192rpx] [margin-bottom:48rpx] [height:96rpx] [line-height:48rpx] [display:flex] [justify-content:flex-start] [align-items:center] [color:#333] [position:relative]">
+      <t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar [width:96rpx] [height:96rpx] [border-radius:48rpx] [overflow:hidden]" />
+      <view class="user-center-card__header__name [font-size:36rpx] [line-height:48rpx] [color:#333] [font-weight:bold] [margin-left:24rpx] [margin-right:16rpx]">{{userInfo.nickName || '微信用户'}}</view>
+      <!-- 需要授权用户信息，通过slot添加弹窗 -->
+      <view class="user-center-card__header__transparent [position:absolute] [left:0] [top:0] [background-color:transparent] [height:100%] [width:100%]" wx:if="{{isNeedGetUserInfo}}">
+        <slot name="getUserInfo" />
+      </view>
+      <!-- 不需要授权用户信息，仍然触发gotoUserEditPage事件 -->
+      <view class="user-center-card__header__transparent [position:absolute] [left:0] [top:0] [background-color:transparent] [height:100%] [width:100%]" bind:tap="gotoUserEditPage" wx:else></view>
+    </view>
+  </block>
+  <!-- 已登录且已经授权用户信息的情况 -->
+  <block wx:if="{{currAuthStep === AuthStepType.THREE}}">
+    <view class="user-center-card__header [margin-top:192rpx] [margin-bottom:48rpx] [height:96rpx] [line-height:48rpx] [display:flex] [justify-content:flex-start] [align-items:center] [color:#333] [position:relative]" bind:tap="gotoUserEditPage">
+      <t-avatar
+        t-class="avatar"
+        mode="aspectFill"
+        class="user-center-card__header__avatar [width:96rpx] [height:96rpx] [border-radius:48rpx] [overflow:hidden]"
+        image="{{userInfo.avatarUrl || defaultAvatarUrl}}"
+      />
+      <view class="user-center-card__header__name [font-size:36rpx] [line-height:48rpx] [color:#333] [font-weight:bold] [margin-left:24rpx] [margin-right:16rpx]">{{userInfo.nickName || '微信用户'}}</view>
+    </view>
+  </block>
+</view>
+</template>
+
+<json>
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
+  }
+}</json>