Prechádzať zdrojové kódy

fix: 购买权益卡 选择服务对象优化

Cooklalala 1 rok pred
rodič
commit
f772fd32da

+ 1 - 2
orderPages/activityDetail/activityDetail.vue

@@ -178,9 +178,8 @@
     <!--    </view>-->
     <uni-popup ref="popup" type="bottom">
       <view class="addService">
-
         <view class="popupTitle">
-          <text>切换服务对象</text>
+          <text>选择服务对象</text>
         </view>
 
         <scroll-view class="scrollY" scroll-y>

+ 79 - 0
storePages/rights/index.rpx.scss

@@ -214,3 +214,82 @@
   text-indent: 2em;
   color: #999999;
 }
+.addService {
+  width: 750rpx;
+  background: #FFFFFF;
+  padding: 24rpx 0;
+  border-radius: 24rpx 24rpx 0rpx 0rpx;
+}
+
+.popupTitle {
+  height: 44rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333333;
+  line-height: 44rpx;
+  margin-left: 34rpx;
+}
+.scrollY {
+  height: 504rpx;
+  margin-top: 34rpx;
+  margin-bottom: 24rpx;
+}
+.cancelButton {
+  width: 332rpx;
+  height: 80rpx;
+  background: #F5F5F5;
+  border-radius: 54rpx;
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #666666;
+}
+.confirmButton {
+  width: 332rpx;
+  height: 80rpx;
+  background: #FFE05C;
+  border-radius: 54rpx;
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #333333;
+}
+.vBackGround {
+  background: rgba(255, 224, 92, 0.1);
+  border: 4rpx solid #FFE05C;
+  box-sizing: border-box;
+}
+.objectImage {
+  width: 108rpx;
+  height: 108rpx;
+  border-radius: 56rpx;
+  border: 2rpx solid #FFFFFF;
+  margin-top: 24rpx;
+  margin-left: 24rpx;
+}
+.objectItem {
+  width: 686rpx;
+  height: 160rpx;
+  background: #FAFAFA;
+  border-radius: 16rpx;
+  margin-left: 32rpx;
+  position: relative;
+  margin-top: 24rpx;
+}
+.objectName {
+  height: 160rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #111111;
+  line-height: 160rpx;
+  margin-left: 24rpx;
+}
+.vImage {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32rpx;
+  height: 32rpx;
+}

+ 307 - 263
storePages/rights/index.vue

@@ -1,17 +1,17 @@
 <template>
-	<view class="page" :style="{ 'height': equityList.length > 0 ? windowHeight : windowHeight1 }">
-		<view class="centent">
-			<view class="flex-col" v-if="equityList.length === 0">
-				<view class="flex-row justify-center">
-					<image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
-				</view>
-				<view class="emptyText flex-row justify-center">
-					<text>暂无内容</text>
-				</view>
-			</view>
-
-			<scroll-view v-else scroll-y :style="{ 'height': windowHeight }">
-				<view class="flex-col row-list" v-for="(item, index) in equityList" :key="index">
+  <view class="page" :style="{ 'height': equityList.length > 0 ? windowHeight : windowHeight1 }">
+    <view class="centent">
+      <view class="flex-col" v-if="equityList.length === 0">
+        <view class="flex-row justify-center">
+          <image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
+        </view>
+        <view class="emptyText flex-row justify-center">
+          <text>暂无内容</text>
+        </view>
+      </view>
+
+      <scroll-view v-else scroll-y :style="{ 'height': windowHeight }">
+        <view class="flex-col row-list" v-for="(item, index) in equityList" :key="index">
           <view class="flex-row justify-start">
             <view class="h-text flex-col justify-center ">
               <view class="money">
@@ -35,7 +35,7 @@
               <view class="title">
                 有效天数:{{ item.effectiveDays }}
               </view>
-              <view class="title flex-row"  @click.stop="showRemark(item)">
+              <view class="title flex-row" @click.stop="showRemark(item)">
                 <text>使用规则</text>
                 <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
                 <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
@@ -55,85 +55,114 @@
             </view>
             <text v-else class="remarkText">该优惠券暂无使用说明</text>
           </view>
-				</view>
-			</scroll-view>
-
-
-		</view>
-
-		<view class="btnTitle flex-row" v-if="equityList.length > 0">
-			<u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
-			<u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
-			<text :style="{ 'margin-left': '10rpx' }">请阅读并同意</text>
-			<text :style="{ 'color': 'red' }" @click="goTermsOfService">《娇骄儿权益服务协议》</text>
-		</view>
-
-		<uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">
-
-			<view class=" payView">
-				<view class="flex-row justify-between">
-					<text class="payType">微信支付</text>
-					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
-				</view>
-				<view class="payItem flex-row justify-between" @click="payItem(2)">
-					<view class="flex-row">
-						<u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
-						<view class="payName flex-col justify-center">
-							<text>微信支付</text>
-						</view>
-					</view>
-					<view class="flex-col justify-center">
-						<view v-if="curServiceTab === 2">
-							<u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
-						</view>
-						<view v-else>
-							<u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
-						</view>
-					</view>
-				</view>
-
-				<view class="commitBtn" @click="commonGeneralOrder">
-					<text>确定</text>
-				</view>
-			</view>
-
-		</uni-popup>
-
-		<u-picker :show="show" title="选择服务对象" :closeOnClickOverlay="true" @close="show = false" :columns="serviceObjectList"
-			keyName="nickName" @cancel="show = false" @confirm="confirm"></u-picker>
-	</view>
+        </view>
+      </scroll-view>
+
+
+    </view>
+
+    <view class="btnTitle flex-row" v-if="equityList.length > 0">
+      <u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
+      <u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
+      <text :style="{ 'margin-left': '10rpx' }">请阅读并同意</text>
+      <text :style="{ 'color': 'red' }" @click="goTermsOfService">《娇骄儿权益服务协议》</text>
+    </view>
+
+    <uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">
+
+      <view class=" payView">
+        <view class="flex-row justify-between">
+          <text class="payType">微信支付</text>
+          <image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
+        </view>
+        <view class="payItem flex-row justify-between" @click="payItem(2)">
+          <view class="flex-row">
+            <u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
+            <view class="payName flex-col justify-center">
+              <text>微信支付</text>
+            </view>
+          </view>
+          <view class="flex-col justify-center">
+            <view v-if="curServiceTab === 2">
+              <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
+            </view>
+            <view v-else>
+              <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
+            </view>
+          </view>
+        </view>
+
+        <view class="commitBtn" @click="commonGeneralOrder">
+          <text>确定</text>
+        </view>
+      </view>
+
+    </uni-popup>
+
+    <!--		<u-picker :show="show" title="选择服务对象" :closeOnClickOverlay="true" @close="show = false" :columns="serviceObjectList"-->
+    <!--			keyName="nickName" @cancel="show = false" @confirm="confirm"></u-picker>-->
+    <uni-popup ref="selectObjectPopup" type="bottom">
+      <view class="addService">
+        <view class="popupTitle">
+          <text>选择服务对象</text>
+        </view>
+        <scroll-view class="scrollY" scroll-y>
+          <view class="flex-row objectItem" :class="{'vBackGround': selectServiceObjectIndex === index}"
+                v-for="(item,index) in serviceObjectList" :key="index"
+                @click="selectServiceObjectIndex = index">
+            <image class="objectImage" :src="item.facePhotoUrl || '/static/ud4.png'"></image>
+            <view class="flex-col objectName ">
+              <text>{{ item.nickName }}</text>
+            </view>
+            <image v-if="selectServiceObjectIndex === index" class="vImage"
+                   src="/static/index/xuanzhong.png"></image>
+          </view>
+        </scroll-view>
+
+        <view class="flex-row justify-around">
+          <view class="cancelButton" @click="closeSelectServiceObjectPopup">
+            <text>取消</text>
+          </view>
+          <view class="confirmButton" @click="confirm(serviceObjectList[selectServiceObjectIndex])">
+            <text>确定</text>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+  </view>
 </template>
 <script>
 export default {
-	data() {
-		return {
-			selectIcon: '',
-			windowHeight: '',
-			windowHeight1: '',
-			show: false,
-			curServiceTab: 2,
-			orderRights: {},
-			userInfo: {},
-			serviceObjectList: [],
-			serviceObjectIndex: 0,
-			equityList: [],
-			serviceObject: {},
-			orderNo: '',
+  data() {
+    return {
+      selectServiceObjectIndex:-1,
+      selectIcon: '',
+      windowHeight: '',
+      windowHeight1: '',
+      show: false,
+      curServiceTab: 2,
+      orderRights: {},
+      userInfo: {},
+      serviceObjectList: [],
+      serviceObjectIndex: 0,
+      equityList: [],
+      serviceObject: {},
+      orderNo: '',
       showRemarkId: '',
-		};
-	},
-	onLoad(option) {
-		let sysInfo = uni.getSystemInfoSync()
-		this.windowHeight = sysInfo.windowHeight - 50 + 'px'//除标题栏栏外的屏幕可用高度
-		this.windowHeight1 = sysInfo.windowHeight + 'px'//除标题栏栏外的屏幕可用高度
-	},
-	onShow(){
+    };
+  },
+  onLoad(option) {
+    let sysInfo = uni.getSystemInfoSync()
+    this.windowHeight = sysInfo.windowHeight - 50 + 'px'//除标题栏栏外的屏幕可用高度
+    this.windowHeight1 = sysInfo.windowHeight + 'px'//除标题栏栏外的屏幕可用高度
+  },
+  onShow() {
     this.userInfo = uni.getStorageSync('userInfo')
-		this.listServiceObject()
-		this.equityCardList()
-	},
+    this.listServiceObject()
+    this.equityCardList()
+  },
 
-	methods: {
+  methods: {
     showRemark(item) {
       if (this.showRemarkId == item.id) {
         this.showRemarkId = ''
@@ -143,185 +172,200 @@ export default {
 
       }
     },
-		goTermsOfService() {
-			uni.navigateTo({
-				url: '/myPages/TermsOfService/index?name=' + '娇骄儿权益服务协议' + '&type=' + 4
-			})
-		},
-
-		selectChange() {
-			this.selectIcon = !this.selectIcon
-		},
-
-		commonGeneralOrder() {
+    goTermsOfService() {
+      uni.navigateTo({
+        url: '/myPages/TermsOfService/index?name=' + '娇骄儿权益服务协议' + '&type=' + 4
+      })
+    },
+    closeSelectServiceObjectPopup(){
+      this.selectServiceObjectIndex = -1
+      this.$refs.selectObjectPopup.close()
+    },
+    selectChange() {
+      this.selectIcon = !this.selectIcon
+    },
+    getImgUrlByBannerOssId(items) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].facePhoto) {
+          this.$api.getImgUrlByOssId({ossId: items[i].facePhoto}).then(res => {
+            items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
+            this.$set(this.serviceObjectList, i, items[i])
+          })
+        }
+      }
+    },
+    commonGeneralOrder() {
       let param = uni.getStorageSync('promotionParam')
-      console.log('获取到技师的二维码数据',param)
-      if (!param){
-        console.log('获取到门店的二维码数据',param)
+      console.log('获取到技师的二维码数据', param)
+      if (!param) {
+        console.log('获取到门店的二维码数据', param)
         param = uni.getStorageSync('storeParam')
       }
-			this.$refs.popup.close()
-			this.$api.commonGeneralOrder({
-				...param,
-				orderType: 5,
-				serviceObjectId: this.serviceObject.id,
-				equityCardId: this.orderRights.id
-			}).then(res => {
-				this.orderNo = res.data.data.orderNo
-
-				if (this.curServiceTab === 1) {
-					//开启余额支付
-					this.balancePay()
-				}
-				if (this.curServiceTab === 2) {
-					//调微信支付
-					this.wechatPay()
-				}
-
-
-			})
-		},
-
-		//余额支付
-		balancePay() {
-			let that = this;
-			this.$api.balancePay({
-				orderNo: this.orderNo,
-				password: ''
-			}).then((res) => {
-				uni.showToast({
-					title: '支付成功!'
-				});
-				this.getUserInfo()
-			})
-		},
-
-		wechatPay() {
-			let that = this;
-			// 发起微信支付
-			this.$api.wechatPay({
-				orderNo: this.orderNo
-			}).then((res) => {
-				var param = res.data.data;
-				uni.requestPayment({
-					appId: param.appid,
-					timeStamp: param.timestamp + "",
-					nonceStr: param.noncestr,
-					package: "prepay_id=" + param.prepayid,
-					signType: "RSA",
-					paySign: param.sign,
-					success: res => {
-						uni.showToast({
-							title: '支付成功!'
-						});
-						setTimeout(() => {
-							uni.navigateTo({
-								url: '/storePages/myRights/index'
-							});
-						}, 2000)
-					},
-					fail: res => {
-						console.log(res)
-						uni.showModal({
-							content: '支付失败',
-							showCancel: false
-						});
-					}
-				});
-			})
-		},
-
-		getUserInfo() {
-			this.$api.getUserInfo().then(res => {
-				console.log('++++++++++++获取用户信息++++++++++++++++++', res)
-				uni.setStorageSync('userInfo', res.data.data)
-				this.userInfo = res.data.data
-			})
-
-		},
-
-		confirm(e) {
-			console.log(e)
-			this.serviceObject = e.value[0]
-			this.show = false
-			this.$refs.popup.open()
-		},
-
-		equityCardList() {
-			this.$api.equityCardList().then(res => {
-				console.log(res)
-				this.equityList = res.data.data
-			})
-		},
-
-
-		// 查询服务对像信息列表
-		listServiceObject() {
-			let serviceObjectList = []
-			this.$api.listServiceObject(this.reqParm).then((res) => {
-				res.data.data.forEach(i => {
-					if (i.isSelf != 1) {
-						serviceObjectList.push(i)
-					}
-				})
-				this.serviceObjectList[0] = serviceObjectList
-
-			})
-		},
-
-		closePayPopup() {
-			this.$refs.popup.close()
-		},
-
-		payItem(num) {
-			if (this.userInfo.balance * 1 < this.orderRights.salePrice * 1) {
-				return
-			}
-			this.curServiceTab = num
-		},
-
-		payRights(item) {
-			this.userInfo = uni.getStorageSync('userInfo')
-			if (!this.userInfo.phone){
-				uni.showModal({
-					title:'温馨提示',
-					content:'权益卡绑定信息需通过手机号进行获取,是否确认绑定手机号',
-					success:res=>{
-						if (res.confirm){
-							uni.navigateTo({
-								url: '/myPages/setting/setting-telphone',
-							})
-						}
-					}
-				})
-				return
-			}
-
-			if (this.serviceObjectList[0].length === 0) {
-				uni.showModal({
-					title: '温馨提示',
-					content: '默认服务对象不能使用权益卡,是否前往绑定新的服务对象?',
-					success: res => {
-						if (res.confirm) {
-							uni.navigateTo({
-								url: '/myPages/ServiceObjectManagement/index',
-							})
-						}
-					}
-				})
-				return;
-			}
-
-
-			if (!this.selectIcon) {
-				uni.$u.toast('请阅读并同意《娇骄儿权益服务协议》')
-				return;
-			}
-			this.show = true
-			this.orderRights = item
-		}
-
-	},
+      this.$refs.popup.close()
+      this.$api.commonGeneralOrder({
+        ...param,
+        orderType: 5,
+        serviceObjectId: this.serviceObject.id,
+        equityCardId: this.orderRights.id
+      }).then(res => {
+        this.orderNo = res.data.data.orderNo
+
+        if (this.curServiceTab === 1) {
+          //开启余额支付
+          this.balancePay()
+        }
+        if (this.curServiceTab === 2) {
+          //调微信支付
+          this.wechatPay()
+        }
+
+
+      })
+    },
+
+    //余额支付
+    balancePay() {
+      let that = this;
+      this.$api.balancePay({
+        orderNo: this.orderNo,
+        password: ''
+      }).then((res) => {
+        uni.showToast({
+          title: '支付成功!'
+        });
+        this.getUserInfo()
+      })
+    },
+
+    wechatPay() {
+      let that = this;
+      // 发起微信支付
+      this.$api.wechatPay({
+        orderNo: this.orderNo
+      }).then((res) => {
+        var param = res.data.data;
+        uni.requestPayment({
+          appId: param.appid,
+          timeStamp: param.timestamp + "",
+          nonceStr: param.noncestr,
+          package: "prepay_id=" + param.prepayid,
+          signType: "RSA",
+          paySign: param.sign,
+          success: res => {
+            uni.showToast({
+              title: '支付成功!'
+            });
+            setTimeout(() => {
+              uni.navigateTo({
+                url: '/storePages/myRights/index'
+              });
+            }, 2000)
+          },
+          fail: res => {
+            console.log(res)
+            uni.showModal({
+              content: '支付失败',
+              showCancel: false
+            });
+          }
+        });
+      })
+    },
+
+    getUserInfo() {
+      this.$api.getUserInfo().then(res => {
+        console.log('++++++++++++获取用户信息++++++++++++++++++', res)
+        uni.setStorageSync('userInfo', res.data.data)
+        this.userInfo = res.data.data
+      })
+
+    },
+
+    confirm(e) {
+      console.log(e)
+      // this.serviceObject = e.value[0]
+      this.serviceObject = e
+      // this.show = false
+      this.$refs.selectObjectPopup.close()
+      this.$refs.popup.open()
+    },
+
+    equityCardList() {
+      this.$api.equityCardList().then(res => {
+        console.log(res)
+        this.equityList = res.data.data
+      })
+    },
+
+
+    // 查询服务对像信息列表
+    listServiceObject() {
+      let serviceObjectList = []
+      this.$api.listServiceObject(this.reqParm).then((res) => {
+        res.data.data.forEach(i => {
+          if (i.isSelf != 1) {
+            serviceObjectList.push(i)
+          }
+        })
+        this.serviceObjectList[0] = serviceObjectList
+        this.getImgUrlByBannerOssId(this.serviceObjectList[0]);
+      })
+    },
+
+    closePayPopup() {
+      this.$refs.popup.close()
+    },
+
+    payItem(num) {
+      if (this.userInfo.balance * 1 < this.orderRights.salePrice * 1) {
+        return
+      }
+      this.curServiceTab = num
+    },
+
+    payRights(item) {
+      this.userInfo = uni.getStorageSync('userInfo')
+      if (!this.userInfo.phone) {
+        uni.showModal({
+          title: '温馨提示',
+          content: '权益卡绑定信息需通过手机号进行获取,是否确认绑定手机号',
+          success: res => {
+            if (res.confirm) {
+              uni.navigateTo({
+                url: '/myPages/setting/setting-telphone',
+              })
+            }
+          }
+        })
+        return
+      }
+
+      if (this.serviceObjectList[0].length === 0) {
+        uni.showModal({
+          title: '温馨提示',
+          content: '默认服务对象不能使用权益卡,是否前往绑定新的服务对象?',
+          success: res => {
+            if (res.confirm) {
+              uni.navigateTo({
+                url: '/myPages/ServiceObjectManagement/index',
+              })
+            }
+          }
+        })
+        return;
+      }
+
+
+      if (!this.selectIcon) {
+        uni.$u.toast('请阅读并同意《娇骄儿权益服务协议》')
+        return;
+      }
+      // this.show = true
+      this.orderRights = item
+      this.$refs.selectObjectPopup.open()
+    }
+
+  },
 };
 </script>
 <style lang="scss" scoped>